在 React 中，我無法使用分叉的 webpack 自定義模塊解決

Question

我正在嘗試使用自定義庫，但在 webpack 運行時看不到能夠使用。我已經將它添加到后備分配和新的解析擴展中，但無法使其工作：

config.resolve.extensions = ['.ts','.tsx','.js','.jsx'],

這是我要添加的組件：

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>
    );
};

它在終端顯示我的錯誤：

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.

這是我的 tsconfig：

{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "lib": [
            "dom",
            "es2015"
        ],
        "jsx": "react-jsx",
    },
    "exclude": ["node_modules"]
}

這是我的配置：

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;
}

鏈接：回購我正在制作錯誤演示： https://github.com/afa7789/wagrk https://github.com/afa7789/ethereum-gradient-base64/

Answer 1

在 package 中，我沒有在 cli 處執行： npm run build. 因此它沒有 100% 准備好導入 package。