web3/dist/web3.js 이슈 / window.ethereum 이슈

web3/dist/web3.min을 가져다가 써야하는데 web3/dist가 없는 이슈

import Web3 from "web3/dist/web3.min"

 

web3/dist/web3.min이나 web/dist/web3.min.js가 없다고 뜰 경우, 다음을 설치해주자.

$ npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

 

config-overrides.js을 루트 디렉토리에 만들어 주고 다음 내용을 넣자.

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.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

 

package.json 안에 있는 script도 아래로 바꿔주자

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

 

일단 나는 여기까지해도 window 객체 안에 ethereum이 없다고하고 다른 모든 속성들도 못 가져와서 web3를 통으로 가져다 썼다

import Web3 from "web3"

 

 

혹시 수정이 되었는데 브라우저에서 계속 에러코드가 뜬다면, config-overrides.json안에 다음 코드를 작성하면 사라진다고 함

config.ignoreWarnings = [/Failed to parse source map/];

 

 

 

다른 프로그램에서 같은 이슈가 생기거나, 자세하게 보고 싶은 경우는 다음 페이지를 참고하자.

( https://github.com/ChainSafe/web3.js#trouble-shooting-and-known-issues )