programing

웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

easyjava 2023. 5. 9. 23:15

웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

webpack 5는 노드 코어 모듈에 대해 더 이상 자동 폴리필링을 수행하지 않습니다.어떻게 고칠까요?

BRAKING CHANGE: node.js 코어 모듈에 대한 폴리필을 기본적으로 포함하는 데 사용되는 webpack < 5.더 이상 그렇지 않습니다.이 모듈이 필요한지 확인하고 모듈에 대한 폴리필을 구성합니다.

웹팩 v4에서 v5로 업그레이드할 때도 이러한 오류가 발생했습니다.과 같이 변경하여 해결되었습니다.webpack.config.js

resolve.fallback 속성 추가

노드 속성이 제거됨

{
resolve: {
  modules: [...],
  fallback: {
    "fs": false,
    "tls": false,
    "net": false,
    "path": false,
    "zlib": false,
    "http": false,
    "https": false,
    "stream": false,
    "crypto": false,
    "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify 
  } 
},
entry: [...],
output: {...},
module: {
  rules: [...]
},
plugins: [...],
optimization: {
  minimizer: [...],
},
// node: {
//   fs: 'empty',
//   net: 'empty',
//   tls: 'empty'
// },
}

v4에서 v5로 업그레이드 => https://webpack.js.org/migrate/5/ #정리 구성

다음을 사용하여 Node.js 코어 모듈에 대한 지원을 다시 추가합니다.

패키지를 설치한 상태에서 다음을 webpack.config.js에 추가합니다.

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

저는 여기에 있는 대부분의 답변이 당신의 문제를 해결할 것이라고 생각합니다.Polyfills를 사용하는 것이 .target: 'node'웹 팩 모듈 구성에서 확인하십시오.이것은 저에게 이 문제를 해결하는 데 도움이 되었습니다.

다음은 답변에 대한 문서입니다. https://webpack.js.org/concepts/targets/

Web3 설명서에 따라 다음을 참조하십시오.

create-message-app 버전 >=5를 사용하는 경우 빌드 중 문제가 발생할 수 있습니다.노드 때문입니다.JS 폴리필은 최신 버전의 create-react-app에 포함되어 있지 않습니다.

솔루션:

react-app-redwired 설치 및 누락된 모듈 설치

실을 사용하는 경우:

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

npm을 사용하는 경우:

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;
}

패키지 내.json은 시작, 빌드 및 테스트를 위한 스크립트 필드를 변경합니다.리액트 스크립트 대신 리액트 앱 재연결로 대체합니다.

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

이후:

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

누락된 Nodejs 폴리필이 지금 포함되어야 하며 앱이 web3에서 작동해야 합니다.

콘솔에서 생성된 경고를 숨기려는 경우:

재정의 함수 내의 config-overrides.js에서 다음을 추가합니다.

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

저는 이 문제에 직면했습니다.create-react-app기본적으로 나에게 준 것.

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"

나는 그냥 바꾸는 것으로 고쳤습니다.react-scripts 전로으로4.0.3.

당신은 그것을 사용한 것처럼 보입니다.path기본적으로 웹 팩 빌드에 포함되지 않은 패키지입니다.저는 이렇게 웹팩 구성을 확장하는 것이 도움이 되었습니다.

{
  // rest of the webpack config
  resolve: {
    // ... rest of the resolve config
    fallback: {
      "path": require.resolve("path-browserify")
    }
  },
}

합니다.path-browserify경유로npm install path-browserify --save-dev또는yarn add path-browserify --dev실을 사용하는 경우.

React => v17 React 스크립트 => v5 webpack => v5가 필요합니다.

문제 해결 방법

설치

"fs": "^2.0.0",  // npm i fs
"assert": "^2.0.0",  // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http

루트 디렉터리에 config-overrides.js를 만드는 중 이미지

config-override에 config를 추가합니다.제이에스

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

패키지 변경.json

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

문제 해결 :)

Create React App은 웹 팩 v5를 구현하는 v5를 방금 출시했습니다.필요한 노드 코어 라이브러리 폴리필이 누락되어 web3를 포함한 많은 라이브러리가 완전히 손상됩니다.

이 문제를 신속하게 해결하려면 패키지에서 이 문제를 변경할 수 있습니다.json:

"react-scripts": "^5.0.0"

이것으로

"react-scripts": "4.0.3"

이후:

rm -r node_modules

rm package-lock.json

npm install

이 문제가 합니다. 웹 팩 은 노드모다시설치는동웹안입니다.5.38.1는 문를해습다니의 했습니다.npm i path-browserify -D 후에는 설치후트야합니다해업을 해야 합니다.webpack.config.js resolve{}와 함께fallback: {"fs": false, "path": require.resolve("path-browserify")}을 하지 않는 동안."fs": false다음과 같은 오류가 표시됩니다.Module not found: Error: Can't resolve 'fs' in '/YOUR DIRECTORY ...'따라서 잊지 말고 추가하십시오. 다른 항목에서는 다음과 같이 표시됩니다.

module.exports = {
   ...
   resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  },
};

거한제를 합니다.node 당신의 한다면 속성.webpack.config.js

방법 1

을 엽니다.project/node_modules/react-scripts/config/webpack.config.js
에 백폴추를 합니다."crypto": require.resolve("crypto-browserify")

resolve: {
   fallback: {
       "crypto": require.resolve("crypto-browserify")
   }
}

를 설치합니다.npm i crypto-browserify
앱을 다시 시작합니다.

위의 방법은 우리가 아니기 때문에 당신이 커밋하면 작동하지 않습니다.`node_modules`

방법 2

패치 패키지 설치: yarn add patch-package
필요한 폴리필을 설치합니다. (애플리케이션의 초기 빌드를 수행하면 알 수 있습니다.)
정node_modules/react-scripts/config/webpack.config.js여기 예가 있습니다.이것은 웹팩의 문서에서 가져온 것입니다.

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'),
    },
  },
};

모두 추가하지 말고 필요한 항목만 추가합니다.

웹 팩 구성을 수정하기 전에 패키지를 먼저 설치해야 합니다.

려달을 합니다.yarn patch-package react-scripts그러면 패치가 생성됩니다(향후 보고서에서 커밋되어야 합니다).
패키지에 설치 후 스크립트를 추가합니다.json:"postinstall": "yarn patch-package"이제 언제든지 누군가가 이 프로젝트에 npmdeps를 설치하면 3단계에서 생성한 패치가 자동으로 적용됩니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "yarn patch-package"
  },

#VUE를 위한 솔루션

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

  transpileDependencies: [
    'vuetify'
  ]

})

환경은 다음과 같습니다.

반응 => v17
대응 스크립트=> v5
webpack => v5

문제를 해결하려면 아래 지침을 따르십시오.

1 - 아래 패키지 설치

yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

2 - 패키지 옆에 있는 프로젝트의 Root dir에 config-coverrides.js를 만듭니다.제이손

다음 코드를 추가합니다.

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

3 - 아래와 같이 packages.js를 변경합니다.

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

는 중용사를 합니다.create-react-app와 함께craco5로 할 때 과 같은 했습니다.

'''비공식'''


Module not found: Error: Can't resolve 'buffer' in '/Users/therightstuff/my-project/node_modules/safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

는 버퍼 해결되었습니다.npm install -D buffer.

'fs'


Module not found: Error: Can't resolve 'fs' in '/Users/therightstuff/my-project/node_modules/line-navigator'

문제는 에 웹 팩 폴백을 되었습니다.craco.config.js:

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}

npm install path-browserify다음을 포함하도록 웹 팩 구성을 변경합니다.

module.exports = {
    ...
    resolve: {
        alias: {
            path: require.resolve("path-browserify")
        }
    }
};

에서 사용하려는 항목

const nodeExternals = require('webpack-node-externals');

webpack.config.js에 추가

target: "node",
devtool: "source-map",
externals: [nodeExternals()],

이 문제는 새 vue-cli 업그레이드(v5)에서 발생합니다.이를 수정하려면(빈 모듈 방식) 변경해야 합니다.vue.config.js이쪽:

configureWebpack: (config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    // Include here the "empty" modules
    url: false,
    util: false,
    querystring: false,
    https: false,
  };
}

저에게 맞는 솔루션을 찾았습니다.

npm uninstall webpack
"package-lock.json" 파일을 삭제합니다.
npm install webpack@4.44.2 --force

에 ".json" 파일을 합니다.

"scripts": {
    "start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

동일한 문제에 직면한 솔루션은 다음과 같습니다.

제다한을 합니다.package-lock.json 및 프트더및에서.npm uninstall webpack
react-script5ˆ4.0.3
ㅠㅠpackage-lock.json 삭제됨됨/삭제됨/삭제됨
을 사용하여 웹 팩 npm install webpack@4.44.2
마지막으로, 실행npm install 사용

npm install assert --save

npm install buffer --save

비슷한 문제에 직면한 사람은 누락된 모듈만 설치하면 됩니다.이러한 모듈은 node.js의 일부이기 때문에 누락된 것으로 보고되지만 npm을 통해서도 별도로 사용할 수 있습니다.

{Router} 고속 가져오기에서 라우터를 'express'에서 가져오는 동안 이 오류가 발생했습니다.

'@angular/router'에서 {Router}을(를) 가져온 후 해결되었습니다.

저는 이 https://stackoverflow.com/a/71803628/15658978 솔루션을 사용해 보았고 그것은 저의 문제를 해결했습니다.

다음 2개의 명령을 실행합니다.

npm uninstall react-scripts
npm install react-scripts@4.0.3

Compiled with problems:X

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in 'E:\My Documents\work\web\mbamasala\node_modules\body-parser\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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 217:12-34

Module not found: Error: Can't resolve 'querystring' in 'E:\My Documents\work\web\mbamasala\node_modules\body-parser\lib\types'

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: { "querystring": require.resolve("querystring-es3") }'
    - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "querystring": false }


ERROR in ./node_modules/destroy/index.js 15:17-41

Module not found: Error: Can't resolve 'fs' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'


ERROR in ./node_modules/destroy/index.js 17:13-30

Module not found: Error: Can't resolve 'stream' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/destroy/index.js 19:11-26

Module not found: Error: Can't resolve 'zlib' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'

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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/mime-types/index.js 15:14-37

Module not found: Error: Can't resolve 'path' in 'E:\My Documents\work\web\mbamasala\node_modules\mime-types'

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 }


ERROR in ./node_modules/safer-buffer/safer.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'E:\My Documents\work\web\mbamasala\node_modules\safer-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }


ERROR in ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'E:\My Documents\work\web\mbamasala\node_modules\string_decoder\node_modules\safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

저는 많은 해결책을 시도했지만 해결하지 못했습니다.수동으로 검색한 후 나는 내 vs 코드에 자동으로 삽입된 코드 한 줄을 받았습니다.import {json} from 'body-parser'시간을 절약하고 제거했습니다.누군가에게 도움이 되길 바랍니다.감사해요.

react-app-rewired의 config-overrides.js 파일을 통해 구성을 계속하는 사용자에게는 다음과 같은 작업이 가능합니다.

config-interval.제이에스

const { override, addWebpackPlugin } = require('customize-cra')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = override(addWebpackPlugin(new NodePolyfillPlugin()))

꾸러미제이손

...
"dependencies": {
    ...
    "customize-cra": "^1.0.0",
    "node-polyfill-webpack-plugin": "^2.0.1"
  },

node-polyfill-webpack-plugin을 웹 팩 5 플러그인으로 주입합니다.

어제 내 앱에서 같은 오류가 발생했습니다.저는 SO에 대한 질문/답변을 읽고 몇 가지를 시도하는 데 몇 시간을 보냈습니다.저에게 효과가 있었던 것은 다음과 같습니다.

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Twilio를 사용하는 경우:

Twilio 모듈은 클라이언트 측 JavaScript에서 사용하기 위한 것이 아니므로 Angular 응용 프로그램에서 실패합니다.Twilio가 계정 SID와 인증 토큰을 사용하는 경우, 클라이언트 측에서 사용하는 것은 위험을 나타냅니다. 따라서 서버 측에서 사용하고 API를 사용하는 것이 가장 좋습니다.

create-react-app v17 및 스크립트 5.0.0에서는 webpack.config.js에 폴백을 추가하고 'process'를 설치해야 합니다.

   `module.exports = function (webpackEnv) {
      .........
      return {
       .........
      resolve: {
      ..........
      fallback: { "process": require.resolve("process/browser") },`

시크릿의 대답은 저에게 거의 효과가 있었습니다. (저는 아직 거기에 대해 언급할 충분한 평판이 없습니다, 죄송합니다!)

그들의 답변의 단계를 따라간 후, 그것은 필요한 버전의 에스슬린트의 차이 때문에, 나는 추가해야 한다고 말했습니다.SKIP_PREFLIGHT_CHECK=true프로젝트의 .env 파일에 추가했기 때문에 기존 파일에 추가했습니다.

)▁but(!▁i▁!) 하지만 그 후, 적어도 할 수 없고 어떤 할 수 없다는 것을 하지만 적어도 크롬에서는 아무것도 클릭할 수 없고 텍스트도 선택할 수 없다는 것을 깨달았습니다.인스펙터에서할 수 것 에 I -할 때 됩니다.npm run start저는 그것이 생산 빌드에서 그것을 하는지 확신할 수 없습니다.

이 갑작스러운 변화는 IMO가 정말로 잘 생각되지 않았다고 말해야 합니다!

제 문제는 JSON.parse를 사용하려다가 글을 쓰기 시작하면서 이름을 JSON으로 바꿨는데 자동완성이 json(작은 글자는 아님)을 보여주었습니다. 누르면 자동으로 가져오기("express/lib/response"에서 {json} 가져오기;)가 원인이었고 전혀 눈치채지 못했습니다.나중에 개발할 때 제 앱이 망가졌고 앱이 꽤 크기 때문에 기록하는 데 약 6시간이 걸렸습니다.

따라서 위의 해결책이 작동하지 않으면 무언가를 가져오지 않았는지 확인하십시오.

다른 모든 답변에는 노드 코어 모듈을 폴리필링하지 않는 방법이라는 한 가지 중요한 내용이 빠져 있습니다.실제로 필요하지 않은 종속성의 종속성에 대한 일부 모듈 독립성에서 오류가 발생하는 경우 이를 무시해도 됩니다.이 경우 가장 간단한 해결 방법은 다음과 같은 작업에 추가하는 것입니다.package.json다음 행:

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

다른 코어 노드 모듈도 마찬가지로 무시해야 합니다.

이 접근 방식은 실제 웹 팩 구성에 기본적으로 직접 액세스할 수 없는 프레임워크(예: Angular)에 적합합니다.

다른 오류를 찾을 때 이 해결책을 찾았습니다.

저는 가능한 한 많은 해결책을 따르려고 노력했습니다.하지만 놀랍게도 그들 중 누구도 저를 위해 일하지 않습니다.다운그레이드 옵션은 제외합니다.하지만 그것은 또 다른 문제를 만듭니다.해당 노드 버전에서 플레이머 모션이 작동하지 않습니다.그래서 콘솔 로그를 추적하려고 했습니다.개봉한 후에 저는 개울이 없어진 것을 알게 됩니다.따라서 간단하게 (npmi 스트림)을 사용하여 해당 종속성을 설치합니다.그리고 문제를 해결했습니다.어쩌면 당신에게는 다를 수도 있습니다.그러나 코드를 몇 줄 더 쓰는 대신 누락된 종속성을 설치하는 것만으로도 문제가 해결됩니다.

언급URL : https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

'programing' 카테고리의 다른 글

버튼 클릭 시 비동기 메서드 호출 (0)	2023.05.29
현재 날짜를 열의 기본값으로 사용 (0)	2023.05.09
맥OS에서 Git를 최신 버전으로 업그레이드하는 방법은 무엇입니까? (0)	2023.05.09
각 하위구에 제목을 추가하는 방법 (0)	2023.05.09
SQL Server에서 RegEx 사용 (0)	2023.05.09

현재글웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

Ajax, reactjs, JSON, WPF, Python, AngularJS, angular, sql-server, TypeScript, WordPress, mariaDB, oracle, Excel, jQuery, GIT, MongoDB, MySQL, bash, C, spring-boot,

Today :
Yesterday :

easyjava

웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

방법 1

위의 방법은 우리가 아니기 때문에 당신이 커밋하면 작동하지 않습니다.`node_modules`

방법 2

'''비공식'''

'fs'

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

웹팩 5에서 노드 코어 모듈을 폴리필하는 방법

방법 1

위의 방법은 우리가 아니기 때문에 당신이 커밋하면 작동하지 않습니다.node_modules

방법 2

'''비공식'''

'fs'

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

위의 방법은 우리가 아니기 때문에 당신이 커밋하면 작동하지 않습니다.`node_modules`