Outlook AddIn/Rect中Axios的Webpack问题



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

中的错误/node_modules/flow重定向/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:UsersdennyFloxAddInpublic' 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:UsersdennyFloxAddInnode_modulesfollow-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:UsersdennyFloxAddInnode_modulesfollow-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:UsersdennyFloxAddInnode_modulesfollow-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:UsersdennyFloxAddInnode_modulesfollow-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:UsersdennyFloxAddInnode_modulesaxiosdistnode'
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:UsersdennyFloxAddInnode_modulesaxiosdistnode'
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:UsersdennyFloxAddInnode_modulesaxiosdistnode'
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:UsersdennyFloxAddInnode_modulesaxiosdistnode'
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

解释这些错误的关键是"突破性变化:webpack<5用于默认情况下包括node.js核心模块的polyfill。现在已经不是这样了">

由于这些项目使用webpack5,因此不会自动为您添加polyfill,您必须显式添加。对于每个错误,您将看到";如果要包含polyfill,则需要"接下来的两行将告诉您添加一个回退并安装一些东西。

添加回退是指更新webpack配置文件。您需要在配置文件的module.fallback部分添加指示行(您应该已经看到一些回退条目(。对于第一个错误,这将是";https":require.resolve("https浏览"('。

对于安装,您需要通过运行npm install向项目中添加回退所需模块的依赖项。对于第一个错误,这意味着运行"npm install https browserfy"。

您需要对每个错误执行此操作。请注意,错误可能会重复出现,并且每个模块只需要执行一次。一旦对每个模块都执行了此操作,那么错误就会消失。

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

您正在使用哪个版本的axios?最新的axios似乎有问题。

发布报告链接以供参考:https://github.com/axios/axios/issues/5154

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

最新更新