React에서 분기된 웹팩 사용자 정의 모듈로 해결할 수 없습니다.

3404 단어
맞춤 라이브러리를 사용하려고 하는데 웹팩이 실행될 때 사용할 수 없는 것을 볼 수 있습니다. 이미 폴백 할당 및 새로운 해결 확장에 추가했지만 작동하지 못했습니다.
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;
}


링크: Repo 오류 데모를 만들고 있습니다: https://github.com/afa7789/wagrk https://github.com/afa7789/ethereum-gradient-base64/

좋은 웹페이지 즐겨찾기