node.js/npm | make-hash.js:3 Uncaught ReferenceError: Buffer is not defined 에러 해결하기

실행 중에 새로운 에러님이 나를 반겨주셨다. 이 부분도 해결된 것 같았다.

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)

 

 

프로젝트 루트 디렉토리에 config-overrides.js을 아래와 같이 변경하였다.

const webpack = require('webpack');

module.exports = function override(config, env) {
  return {
    ...config,
    plugins: [
      ...config.plugins,
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
    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"),
      }
    }
  };
};

 

 

추가된 내용을 다시 한번 더 확대하면 아래와 같다.

plugins: [
  ...config.plugins,
  new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
  }),
  new webpack.ProvidePlugin({
    process: 'process/browser',
  }),
],

 

ProviderPlugin({...}) 에서 Buffer 항목을 추가하였을 때, Buffer 오류는 해결할 수 있었다. 짝짝! 하려는 순간에 다시 접속해보니 아래의 에러님이 또 나를 반겨주었다. 그래서 ProviderPlugin({...})에 process 항목을 추가하게되었다.

ERROR in ./node_modules/axios/lib/utils.js 669:91-98
Module not found: Error: Can't resolve 'process/browser' in '/Users/.../admin/node_modules/axios/lib'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

 

그렇다면 에러가 다 해결되었을까? 아직 아니다. ㅠㅠ 실행 중에 또 다른 에러님이 나를 반겨준다.

Failed to compile.

Module not found: Error: Can't resolve 'process/browser' in '/Users/.../admin/node_modules/axios/lib'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/axios/lib/utils.js 669:91-98
Module not found: Error: Can't resolve 'process/browser' in '/Users/.../admin/node_modules/axios/lib'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-router/dist/development/chunk-5UALIXAM.mjs 510:13-20
Module not found: Error: Can't resolve 'process/browser' in '/Users/.../admin/node_modules/react-router/dist/development'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/axios/lib/utils.js
Cannot read properties of undefined (reading 'module')

webpack compiled with 3 errors
No issues found.

 

마무리!

무시하면 좋겠다만, 에러님은 끊이지 않고 인사를 건내고 있다. 뭔가 방향을 잘 못 잡은듯 하다. 마음을 조금 가라앉힌 후 차분히 다시 생각을 해봐야겠다.

main.js:39 Uncaught TypeError: Cannot read properties of undefined (reading 'isTTY')
    at ./src/index.tsx (index.tsx:8:1)
    at options.factory (react refresh:37:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:7:1
    at startup:7:1