在反应中，我无法解决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

在这个包中，我没有在cli：npm run build.上执行，因此它没有100%准备好导入包。