While in React I can't resolve with webpack custom module that was forked

Arthur Abeilice — Mon, 19 Sep 2022 18:09:44 +0000

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/

DEV Community: Arthur Abeilice

While in React I can't resolve with webpack custom module that was forked