Я пытаюсь заставить webpack работать в моем приложении create-react, но я получаю эту огромную ошибку

ProgramBox

Я пытаюсь заставить webpack работать в моем приложении create-react, но я получаю эту огромную ошибку

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#reactjs #webpack

#reactjs #веб — пакет #webpack

Вопрос:

Я пытаюсь заставить webpack работать в моем create-react-app, но я получаю эту огромную ошибку, и это потому, что я следую руководству для некоторых мест. Учебные пособия противоречивы, поскольку, как я понимаю, webpack менялся с годами.

Любая ide, что это такое, когда я делаю yarn start Я также включил снимок экрана ниже

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

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

PS L:reactGreta100Weeksgreta100weeks> 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:reactGreta100Weeksgreta100weeks
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:reactGreta100Weeksgreta100weeksnode_modulesbabel-plugin-macrosnode_modulescosmiconfigdist'
 @ ./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:reactGreta100Weeksgreta100weeksnode_modulesbabel-plugin-macrosnode_modulespath-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:reactGreta100Weeksgreta100weeksnode_modulesbabel-plugin-macrosnode_modulesresolve-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:reactGreta100Weeksgreta100weeksnode_modulesresolvelib'
 @ ./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:reactGreta100Weeksgreta100weeksnode_modulesresolvelib'
 @ ./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:reactGreta100Weeksgreta100weeksnode_modulesbabel-plugin-macrosnode_modulesresolve-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:reactGreta100Weeksgreta100weeksnode_modulesrequire-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 я получил только две ошибки

Обновить

Ответ №1:

просто поместите babel-plugin-macros в plugins раздел вашего .babelrc файла.

или попробуйте добавить в 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"]
        },
    ]
},

надеюсь, это поможет

1. My .babelrc выглядит так { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] }

2. Спасибо. Но в моей конфигурации webpack у меня есть правила, а не загрузчики, как вы видите на моей первой картинке, куда мне поместить ваш загрузчик

3. @ExocetKid для использования правил module: { rules: [ { test: /.css$/, use: [ 'style-loader', 'css-loader', ] } ] } но я не уверен

4. Это вроде как сработало, теперь я получил некоторую ошибку шрифта из slick-carousel. Я добавил картинку в свой вопрос. Create-react-app был добрее, лол

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Одинаковое положение мыши (x,y) с масштабированием браузера и без него

Как отменить сенсорное нажатие в пользу PanResponder в родительском представлении

C # Переопределение абстрактных методов (включая входные параметры)