node.js/npm | Module not found: Error: Can't resolve 'path' in '/Users/.../admin/node_modules/dotenv/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this modul

1. 어떤 상황일까?

Typescript로 작성된 소스 코드를 받게 되었다. 컨테이너로 빌드한 후 아래의 환경에 따라 API Endpoint가 다르게 설정되어야 한다. 현재 작은 규모지만, 개발환경과 운영환경을 분리가 되어 있다.

• 개발환경 - development
• 운영환경 - production

그렇기 때문에 이를 위해 dotenv를 의존성에 추가하고 Typescript 빌드 명령어를 실행했다.

$ npm run build

 

2. 만남

아니나 다를까, 에러님이 나를 찾아왔다. 대략 내용은 dotenv에서 경로를 찾을 수 없다는 이야기였다.

이럴때 보면 에러님은 나를 너무 좋아하는 것 같다. ㅠ.ㅠ

이렇게 불쑥 나를 찾아온다면, 민망해서 몸둘바를 모르겠다.

> frontend@0.1.0 build
> react-scripts build

(node:85577) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead
(Use `node --trace-deprecation ...` to show where the warning was created)
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'path' in '/Users/.../admin/node_modules/dotenv/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

2. 무엇인 문제일까?

Webpack 5 부터는 더 이상 node.js를 위한 Polyfills를 기본으로 제공하지 않는다고 한다. 그런데 내가 추가한 의존성에 포함된 일부 또는 전체 모듈에서 이러한 기능을 사용해서 발생하는 경우라고 한다.

 

이번 케이스에서는 path 라이브러리가 문제가 되어 에러가 발생한 것으로 보인다.

 

Polyfills는 만약 오래된 브라우저에서 지원하지 않는 현대 자바스크립트 기능이 동작할 수 있게 지원하거나 다양한 브라우저들마다 다르게 정의된 기능들이 있을 수 있다. 이 때문에 Polyfills가 특정 브라우저에서 지원되지 않는 기능들을 채워주는 역할을 한다.

 

Webpack 5부터는 이러한 모듈을 번들에 포함되지 않도록 변경되었을까?

 

node.js 코어 모듈이 직접 사용되는것을 방지하기 위함이었다고 하는데, 좀 더 찾아봐야겠다.

3. 어떻게 해결할까?

react-app-rewired

https://velog.io/@fgprjs/JS-Crypto-Module-Build-Module-Not-Found-Error

JS Crypto Module Build - Module Not Found Error

위 링크에서 react-app-rewired 패키지를 설치하여 해결방법을 안내하고 있다. 위 예제는 node.js만 사용하는 경우를 의미하고, 나의 경우와는 좀 다른 것 같았다.

 

나의 경우는 Typescript를 사용하고 최종적으로 react-scripts로 빌드되어 실행되는 형태인데 예제를 보면서 config-overrides.js 파일 작성하는 부분이 node.js로 작성된 예제로 보인다.

webpack.config.js

이 부분은 의존성으로 설치된 Webpack 5에 설정 파일을 직접 수정하는 경우를 말하는 것 같다. 하지만, 이 파일을 수정하면 업데이트마다 이 파일을 수정해야 한다. 지금 해결하는데는 가장 빠른 방법이 될 것 같지만, 시간이 지나 node_modules를 지웠을 경우 이를 기억하지 못하면 쓸데 없이 삽질 하고 있을 가능성이 매우 크다는 단점이 있다.

React Scripts 다운그레이드

그렇다면 React Scripts 버전을 다운그레이드 하는 방법도 찾았다. 직접 실행해 보지 않았지만, 장기적으로는 좋지 못한 선택지로 보인다. 초반에 정했던 환경이 시간이 지나서 개발 환경이 전체적으로 변경 적이 있었다. 당시에 JVM 환경이었는데 그나마 안정적이었고 괜찮았던 버전이 1.7.x 버전이었다. 그래서 사용했는데, 오랜 시간이 지나 윈도우 버전도 7에서 10으로 변경되고 JVM이 1.8, 1.9 이상 버전이 나오던 시점이었는데 빌드가 되지 않아 빌드는 1.7.x 버전으로 실행은 1.8.x 버전으로 했던 기억이 있다. 기억이라 정확한 버전까지는 기억나지 않는다. ㅠㅠ

4. 그래서 해결?

여러가지 고려하던 중 react-app-rewired 방식으로 해결보는 것을 선택했다. 그래서 프로젝트 루트 디렉토리에 config-overrides.js 파일을 하나 만들고 아래와 같이 내용을 채워넣었다.

module.exports = function override(config, env) {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      fallback: {
        url: require.resolve("url"),
        buffer: require.resolve("buffer"),
        vm: require.resolve("vm-browserify"),
        path: require.resolve("path-browserify"),
        crypto: require.resolve("crypto-browserify"),
        os: require.resolve("os-browserify/browser"),
        stream: require.resolve("stream-browserify"),
      }
    }
  };
};

 

사실 중간 중간에 에러가 있었는데 crypto-browserify, stream-browserify, vm-browserify를 추가로 설치해서 변경하였다. 위 내용중에 buffer는 아래 내용에서 언급하겠지만, 새로운 에러님이 나를 반겨주는 바람에 추가하였다.

 

위 파일을 작성하고 아래의 명령을 실행했다.

$ npm run build

 

다행이 빌드상에 에러는 없었고, react-app-rewired로 빌드 문제는 해결한듯 보였다.

그러나 접속했을 때 새로운 에러님이 날 반겨주었다.

make-hash.js:3 Uncaught ReferenceError: Buffer is not defined
    at ./node_modules/pbkdf2/node_modules/create-hash/make-hash.js (make-hash.js:3:1)
    at options.factory (react refresh:37:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at hotRequire (react refresh:20:1)
    at ./node_modules/pbkdf2/node_modules/create-hash/md5.js (md5.js:11:1)
    at options.factory (react refresh:37:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at hotRequire (react refresh:20:1)