Outlook-AddIn/React 中 Axios 的 Webpack 问题

Question

我对 JS 环境还是有点陌生​​，迫切需要一些帮助。我想创建一个带有反应接口的 Outlook 插件，并通过 yeoman 生成器创建了一个模板。最后，我通过 npm 在项目中添加了一个名为 axios 的库。现在编译/调试时出现几个错误：

./node_modules/follow-redirects/index.js 中的错误 3:11-26 找不到模块：错误：无法解析“PathToModule\node_modules\follow-redirects”中的“http”

错误说明了什么，我该如何消除它们？

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): https://192.168.100.31:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\denny\FloxAddIn\public' directory
assets by path assets/*.png 88.2 KiB 6 assets
assets by path *.js 9.93 MiB
  asset vendor.js 6.21 MiB [emitted] (name: vendor) 1 related asset
  asset taskpane.js 2.6 MiB [emitted] (name: taskpane) 1 related asset
  asset polyfill.js 888 KiB [emitted] (name: polyfill) 1 related asset
  asset commands.js 249 KiB [emitted] (name: commands) 1 related asset
assets by path *.xml 8.42 KiB
  asset manifest copy.xml 4.61 KiB [emitted] [from: manifest copy.xml] [copied]
  asset manifest.xml 3.81 KiB [emitted] [from: manifest.xml] [copied]
assets by path *.html 1.55 KiB
  asset taskpane.html 1.12 KiB [emitted]
  asset commands.html 444 bytes [emitted]
asset 8557bda7801491dd2dad.css 1.48 KiB [emitted] [immutable] [from: src/taskpane/taskpane.css]
orphan modules 25.7 KiB [orphan] 182 modules
runtime modules 110 KiB 52 modules
modules by path ./node_modules/ 4.66 MiB 1433 modules
modules by path ./src/ 45.4 KiB
  modules by path ./src/taskpane/components/*.js 41.4 KiB
    ./src/taskpane/components/App.js 10.6 KiB [built] [code generated]
    ./src/taskpane/components/Header.js 5 KiB [built] [code generated]
    ./src/taskpane/components/HeroList.js 5.41 KiB [built] [code generated]
    ./src/taskpane/components/Progress.js 5.15 KiB [built] [code generated]
    ./src/taskpane/components/BeteiligtenListe.js 5.49 KiB [built] [code generated]
    ./src/taskpane/components/BeteiligterAction.js 9.84 KiB [built] [code generated]
  ./src/taskpane/index.js 1.89 KiB [built] [code generated]
  ./src/commands/commands.js 2.02 KiB [built] [code generated]
./assets/logo-filled.png 42 bytes (javascript) 38.9 KiB (asset) [built] [code generated]

ERROR in ./node_modules/follow-redirects/index.js 3:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\denny\FloxAddIn\node_modules\follow-redirects'
Did you mean './http'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
 @ ./node_modules/axios/dist/node/axios.cjs 9:24-51
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/follow-redirects/index.js 4:12-28
Module not found: Error: Can't resolve 'https' in 'C:\Users\denny\FloxAddIn\node_modules\follow-redirects'
Did you mean './https'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

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: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }
 @ ./node_modules/axios/dist/node/axios.cjs 9:24-51
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/follow-redirects/index.js 5:15-41
Module not found: Error: Can't resolve 'stream' in 'C:\Users\denny\FloxAddIn\node_modules\follow-redirects'

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 }
 @ ./node_modules/axios/dist/node/axios.cjs 9:24-51
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/follow-redirects/index.js 6:13-30
Module not found: Error: Can't resolve 'assert' in 'C:\Users\denny\FloxAddIn\node_modules\follow-redirects'

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: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
 @ ./node_modules/axios/dist/node/axios.cjs 9:24-51
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/axios/dist/node/axios.cjs 7:13-28
Module not found: Error: Can't resolve 'http' in 'C:\Users\denny\FloxAddIn\node_modules\axios\dist\node'

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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/axios/dist/node/axios.cjs 8:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Users\denny\FloxAddIn\node_modules\axios\dist\node'

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: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/axios/dist/node/axios.cjs 10:13-28
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\denny\FloxAddIn\node_modules\axios\dist\node'

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 }
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32
Module not found: Error: Can't resolve 'stream' in 'C:\Users\denny\FloxAddIn\node_modules\axios\dist\node'

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 }
 @ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
 @ ./src/taskpane/components/App.js 36:0-52 203:45-62
 @ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.53.0 compiled with 8 errors in 17315 ms

Answer 1

解释这些错误的关键是“BREAKING CHANGE：webpack < 5 用于默认包含 node.js 核心模块的 polyfill。现在情况不再如此。”

由于这些项目使用 webpack 5，因此不会自动为您添加 polyfill，您必须明确地添加。对于每个错误，您将看到“如果要包含 polyfill，则需要...”，接下来的两行将告诉您添加后备并安装一些东西。

添加回退是指更新 webpack 配置文件。您需要将指示行添加到配置文件的 module.fallback 部分（您应该会看到一些后备条目已经存在）。对于第一个错误，这将是 '"https": require.resolve("https-browserify")'。

对于安装，您需要通过运行 npm install 为您的项目添加回退所需的所需模块的依赖项。对于第一个错误，这意味着运行“npm install https-browserify”。

您需要为每个错误执行此操作。请注意，错误可能会重复出现，您只需在每个模块中执行一次。一旦为每个模块执行此操作，错误就会消失。

请注意，您可以选择在 webpack 配置文件中设置 false 来代替不使用该模块，但您可能会发现自己因此遇到其他错误。

Answer 2

您使用的是哪个版本的axios？最新的axios 似乎有问题。

问题报告链接供参考：https://github.com/axios/axios/issues/5154

如果您降级axios 版本，它将正常工作。