241128 - react 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. / cloudinary fs module not found

문제 상황

1. cloudinary client를 다운받고, .ts파일을 만들어 돌리려는데 Webpack 5 어쩌고 에러가 남
2. 1. 문제를 해결했지만, fs module을 찾지 못했다는 에러가 계속 남

해결 방법

1번 문제

나도 문제가 생겼었는데, 문제를 해결하고 스크린샷을 찍으려 하니 이제 더 이상 문제가 생기지 않아 대신 같은 문제의 다른 사진으로 대체한다..

 

1. webpack.config.js를 연다 (위치 - node_modules/react-scripts/config/webpack.config.js)
2. plugin 부분에 밑에 github 답변대로 new webpack.ProvidePlugin... 부분을 넣는다.
3. 그 아래 resolve 안에 fallback 부분을 추가하고, 필요한 모듈을 넣는다.
   https://webpack.kr/configuration/resolve/#resolvefallback
4. 추가한 모듈들을 모두 npm install한다. 설치하지 않으면 계속 오류가 나게 된다.
5. 실행하고 잘 돌아가는지를 확인한다.

각 모듈별 resolve 하는 방법은 다음 링크에 나와 있다. - https://webpack.kr/configuration/resolve/#resolvefallback
해당 링크는 webpack5에서 더 이상 자동으로 polyfill 하지 않는 모듈들 리스트이다.
즉, 다음 모듈들이 import되지 않아 문제가 생기므로 다음 모듈들을 다운로드하여 간다면 문제가 없어야 한다.

Webpack 5는 더 이상 Node.js의 핵심 모듈을 자동으로 폴리필하지 않습니다. 즉, 브라우저 등에서 실행되는 코드에서 사용하는 경우 npm에서 호환되는 모듈을 설치하고 직접 포함해야 합니다. 다음은 webpack 5 이전에 사용한 폴리필 목록입니다.

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

또는, 다음과 같은 방법으로도 해결 가능한 것 같다.
https://sooknise.tistory.com/169

2번 문제

일단 원인은 fs모듈이 node.js 모듈인데, 브라우저에 들어가지 못해서 나는 문제인 것 같다.
next.js를 사용하는 사람들도 해당 문제에 대해 많이 질문했는데, 대부분 next.config.js에서 fs:false로 설정하는 방식으로 문제를 해결했다.

나도 그렇게 하면 해결이 될까 싶어 따라해봤다.
위의 fallback에 fs: false,를 추가했더니 성공이다.

참고 자료

1번 문제 관련

https://github.com/web3/web3.js/issues/4090
ㄴ여기 northhub 님 답변대로 하니까 빌드됨

npm i buffer process stream-browserify os-browserify stream-http https-browserify url

node_modules/react-scripts/config/webpack.config.js 파일 수정

const webpack = require("webpack")
...

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ],
  resolve: {
    fallback: {
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
      os: require.resolve("os-browserify/browser"),
      url: require.resolve("url"),
      assert: require.resolve("assert"),
    },
  },
};

https://webpack.kr/configuration/resolve/#resolvefallback

2번 문제 관련

https://github.com/JuyeolRyu/NodeSNS/issues/3

일단 해당 글에서 제일 잘 나와있다.

https://github.com/vercel/next.js/issues/1501

ㄴ여기서도

You can't use cloudinary because I hope it's a server side file issue.

라고 한다.

https://github.com/facebook/create-react-app/issues/11756#issuecomment-994680220

ㄴ브라우저에서 사용하면 안 된다는 글

https://stackoverflow.com/questions/78917930/why-i-am-getting-error-cant-resolve-fs-when-i-am-using-cloudinary-in-next-js

ㄴnext.js에서도 false로 사용을 해제한다