Kid
Reputation: 2205
I try to get webpack working in my create-react-app but I get this massive error
I try to get webpack working in my create-react-app but I get this massive error and it's because I follow tutorial for some places. The tutorials are inconsistent because of as I understand that webpack has changed over the years.
Any ide what this is when I do yarn start I also included a screen-shot below
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
UPDATE After @VadimRogov answer I only got two errors
UPDATE
Upvotes: 1
Views: 1435
Answers (1)
Vadim Rogov
Reputation: 270
just put babel-plugin-macros into the plugins section of your .babelrc file.
or try to add to the webpack config something like this
node: {
fs: 'empty',
}
UPDATE FOR NEW ERRORS
add it to webpack config
module: {
loaders: [
{
test: /\.(scss|sass)$/i,
include: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'path/to/imported/file/dir'),
],
loaders: ["css", "sass"]
},
]
},
hope this helps
Upvotes: 1
Related Questions
- Invalid configuration error while creating a react app with webpack configuration
- Error running React App "about the webpack"
- webpack is not working properly in react.js
- Error in setting up ReactJs
- webpack build failed
- Webpack React Error
- Webpack failed to compile React.js project
- Webpack error when running "webpack" command
- React error when compiling with webpack
- Webpack error with react