[React] 최신 React환경에서 Web3.js 적용하기(오류수정)

(공식) Web3.js Github Troubleshooting and known issues.

Create-React-App

npx create-react-app frontend
npm install web3 web3-utils

최신 react 템플릿을 사용하여 web3.js를 빌드할 때 수 많은 오류가 발생한다.
공식 깃헙에서는 이러한 문제를 react-app-wired를 활용하여 부족한 모듈을 직접 설치하도록 안내하고 있다.

1. react-app-rewired 및 부족한 모듈 설치

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

2. 루트 디렉토리에 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;
}

3. package.json 실행 스크립트 수정

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

(추가)
안내대로만 설치하면 2가지 모듈(constants, path)이 추가로 부족하다고 오류가 발생함을 확인할 수 있다. 같은 방식으로 설치하고 환경 파일에 추가를 해주면 정상적으로 처리할 수 있다.

4. 부족한 모듈 추가 설치

npm install --save-dev constants-browserify path-browserify

5. 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"),
    constants: require.resolve("constants-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"),
    path: require.resolve("path-browserify"), // 추가
    url: require.resolve("url"),
  });
  config.resolve.fallback = fallback;
  config.ignoreWarnings = [/Failed to parse source map/];
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

블록체인에 관련한 프로젝트를 하면서 프론트에서 Web3.js를 적용하는데 있어 충돌이 크게 발생하여 기록을 남긴다.
가장 먼저 접한 글은 react-scripts 버전을 낮추라는 방법이었는데, 기존에 작업한 프로젝트 코드들이 최신버전으로 작성되어있어 공식문서를 찾게 되었다. 이슈로 다뤄지고 있는 부분이어서 약간의 노력으로 기존 프로젝트를 보전할 수 있던 계기가 되었다.

🛠️ Anveloper