我试着让webpack在我的创建反应应用程序中工作，但是我得到了这个巨大的错误。

Question

我试图让webpack在我的创作-反应-应用程序，但我得到了这个巨大的错误，这是因为我遵循教程的一些地方。这些教程不一致，因为据我所知，webpack这些年来发生了变化。

在我做yarn start时，我还包括了下面的屏幕截图。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Try the new cross-platform PowerShell https://aka.ms/pscore6

PS L:\react\Greta100Weeks\greta100weeks> yarn start
yarn run v1.12.3
warning package.json: "dependencies" has dependency "react" with range "^16.8.4" that collides with a dependency in "devDependencies" of the same name with version "^16.4.2"
warning package.json: "dependencies" has dependency "react-dom" with range "^16.8.4" that collides with a dependency in "devDependencies" of the same name with version "^16.4.2"
warning package.json: "dependencies" has dependency "react-scripts" with range "^3.4.0" that collides with a dependency in "devDependencies" of the same name with version "^3.4.3"        
$ cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.js
i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from L:\react\Greta100Weeks\greta100weeks
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
× ｢wdm｣: Hash: 4740982fbb5b2496e78a
Version: webpack 4.42.0
Time: 4474ms
Built at: 2020-08-23 21:37:48
    Asset      Size  Chunks             Chunk Names
bundle.js  3.63 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/index.js 52 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.js] 181 bytes {main} [built]
    + 333 hidden modules

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 78:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

WARNING in ./node_modules/babel-plugin-macros/node_modules/import-fresh/index.js 31:31-48
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js 9:33-46
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerSync.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/babel-plugin-macros/node_modules/path-type/index.js
Module not found: Error: Can't resolve 'fs' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\babel-plugin-macros\node_modules\path-type'
 @ ./node_modules/babel-plugin-macros/node_modules/path-type/index.js 3:11-24
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/getDirectory.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerSync.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/babel-plugin-macros/node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'fs' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\babel-plugin-macros\node_modules\resolve-from'
 @ ./node_modules/babel-plugin-macros/node_modules/resolve-from/index.js 4:11-24
 @ ./node_modules/babel-plugin-macros/node_modules/import-fresh/index.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\resolve\lib'
 @ ./node_modules/resolve/lib/async.js 1:9-22
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\resolve\lib'
 @ ./node_modules/resolve/lib/sync.js 2:9-22
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/babel-plugin-macros/node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\babel-plugin-macros\node_modules\resolve-from'
 @ ./node_modules/babel-plugin-macros/node_modules/resolve-from/index.js 3:15-32
 @ ./node_modules/babel-plugin-macros/node_modules/import-fresh/index.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/require-from-string/index.js
Module not found: Error: Can't resolve 'module' in 'L:\react\Greta100Weeks\greta100weeks\node_modules\require-from-string'
 @ ./node_modules/require-from-string/index.js 3:13-30
 @ ./node_modules/babel-plugin-preval/dist/helpers.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/components/elements/ShowBuildAndVersion.js
 @ ./src/components/elements/Hero.js
 @ ./src/components/structure/Header.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/slick-carousel/slick/slick-theme.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset 'UTF-8';
| /* Slider */
| .slick-loading .slick-list
 @ ./src/components/sections/TimeLine.js 28:0-46
 @ ./src/components/structure/Content.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/slick-carousel/slick/slick.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* Slider */
> .slick-slider
| {
|     position: relative;
 @ ./src/components/sections/TimeLine.js 27:0-40
 @ ./src/components/structure/Content.js
 @ ./src/App.js
 @ ./src/index.js
i ｢wdm｣: Failed to compile.
Error from chokidar (L:\): Error: EBUSY: resource busy or locked, lstat 'L:\pagefile.sys'
Terminate batch job (Y/N)? n 

​

​

@VadimRogov回答后的更新我只收到两个错误

​

​

更新

​

​

Answer 1

只需将babel-plugin-macros放入.babelrc文件的plugins部分即可。

或尝试向webpack配置中添加如下内容

node: {
   fs: 'empty',
}

新错误的更新

将其添加到webpack配置中

module: {
    loaders: [
        {
            test: /\.(scss|sass)$/i,
            include: [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'path/to/imported/file/dir'),
            ],
            loaders: ["css", "sass"]
        },
    ]
},

希望这能帮上忙