I"m trying to use a custom library but I can't see to be able to use when the webpack runs. I already added it to the fallback assign and a new resolve extensions, but couldn't make it work:
config.resolve.extensions = ['.ts','.tsx','.js','.jsx'],
This is the component I'm adding it:
import {AvatarComponent} from '@rainbow-me/rainbowkit';
import makeGradient from 'ethereum-gradient-base64';
export const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
const image = makeGradient(address);
return ensImage ? (
<img
src={ensImage}
width={size}
height={size}
style={{ borderRadius: 999 }}
/>
) : (
<div>
<img
src={image}
width={size}
height={size}
style={{ borderRadius: 999 }}
/>
</div>
);
};
Error it shows me at terminal:
Failed to compile.
Module not found: Error: Can't resolve 'ethereum-gradient-base64' in '/home/afa/Documents/code/others/PROJECTS/wagrk/src/Components/Web3'
ERROR in ./src/Components/Web3/CustomAvatar.tsx 4:0-52
Module not found: Error: Can't resolve 'ethereum-gradient-base64' in '/home/afa/Documents/code/others/PROJECTS/wagrk/src/Components/Web3'
webpack compiled with 1 error
No issues found.
this is my tsconfig:
{
"include": [
"./src/**/*"
],
"compilerOptions": {
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"isolatedModules": true,
"lib": [
"dom",
"es2015"
],
"jsx": "react-jsx",
},
"exclude": ["node_modules"]
}
and this is my config:
const webpack = require('webpack');
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.ignoreWarnings = [/Failed to parse source map/];
config.resolve.fallback = fallback;
config.resolve.extensions = ['.ts','.tsx','.js','.jsx'],
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
Links: Repo That I'm making the error demo: https://github.com/afa7789/wagrk https://github.com/afa7789/ethereum-gradient-base64/
In the package I have not execute at cli: npm run build.
thus it didn't had the package 100% ready to import.