failed Building production JavaScript and CSS bundles,ERROR #98123 WEBPACK
Closed this issue ยท 25 comments
I lost my entire day searching solution for ERROR #98123 WEBPACK when building gatsby site .
I found it's due to case-sensitive in the components, and tried many times changing name case of all compenents.
But getting,
failed Building production JavaScript and CSS bundles - 0.095s
ERROR #98123 WEBPACK
undefined failed
Cannot read property 'includes' of undefined
The issues similar to this doesn't giving an accurate solution, so please provide a solution else it should be better to move to other react frameworks.
Hi!
Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.
If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.
Thanks for using Gatsby! ๐
Website: https://github.com/anto-pv/Portfolio.git
It is running in locally without any errors.
But when doing, netlify deploy or gatsby build, it's showing:
............................................
`success run static queries - 0.015s - 1/1 68.59/s
success write out requires - 0.007s
failed Building production JavaScript and CSS bundles - 0.104s
ERROR #98123 WEBPACK
undefined failed
Cannot read property 'includes' of undefined`
Website: https://github.com/anto-pv/Portfolio.git
It is running in locally without any errors.
But when doing, netlify deploy or gatsby build, it's showing:
............................................
`success run static queries - 0.015s - 1/1 68.59/s
success write out requires - 0.007s
failed Building production JavaScript and CSS bundles - 0.104sERROR #98123 WEBPACK
undefined failed
Cannot read property 'includes' of undefined`
did you solve the problem ? I'm having the same problem.
I'm also only having this issue on Netlify and not locally
I'm also only having this issue on Netlify and not locally
I also get this problem on Netlify. I couldn't solve the problem for 2 days. Local is also running the project, but I get this error when I build at locally.
I don't found the solution yet, then I tried with gh-pages using Gatsby Deploy github actions and it worked for me.
Same problem as @ibrahimgediktr. gatsby develop is building the site just fine, gatsby build gives me the same error pasted below:
failed Building production JavaScript and CSS bundles - 0.102s
error undefined failed
Cannot read property 'includes' of undefined
Same problem as @ibrahimgediktr. gatsby develop is building the site just fine, gatsby build gives me the same error pasted below:
failed Building production JavaScript and CSS bundles - 0.102s
error undefined failedCannot read property 'includes' of undefined
Try gatsby build, may be your code was wrong ,or if that's building site fine then try using github actions
I did try gatsby-build. I'm developing locally, when I run gatsby-develop the website build correctly without any errors. When I try gatsby-build it throws this error at the "Building production JavaScript and CSS bundles" step. I tried deploying to Netlify and running build, got the same error.
Attaching screenshots of the output logs when using gatsby-develop:
Attaching screenshots of the output logs when using gatsby-build:
Info about my build environment
Updated npm and install gatsby-cli globally. Getting this error now. Making some progress! Any suggestions for this issue?
Updated npm and install gatsby-cli globally. Getting this error now. Making some progress! Any suggestions for this issue?
I tried every way but it didn't work, I deleted my node module and package-lock.json file but it didn't work, I had to created the project again, I completely deleted and rebuilt the project, and I didn't get any errors.
Ok I'll give that a shot. Can you post your gatsby-info here? Thanks
Ok I'll give that a shot. Can you post your gatsby-info here? Thanks
Here
Found the issue! I went through package.json line by line and removed all the packages that weren't necessary. Webpack was included for some reason. Able to run develop and build without any issues now.
Found the issue! I went through package.json line by line and removed all the packages that weren't necessary. Webpack was included for some reason. Able to run develop and build without any issues now.
I'm glad you solved the problem, but I still don't know what caused the real problem.
I had this issue as well after using npm-check-updates to upgrade everything. This had moved my webpack dependency to 5.11.0. Going back to webpack@4 has solved the issue for me.
Not working: webpack@5.11.0
Working: webpack@4.22.2
I had this issue as well after using npm-check-updates to upgrade everything. This had moved my webpack dependency to 5.11.0. Going back to webpack@4 has solved the issue for me.
Not working: webpack@5.11.0
Working: webpack@4.22.2
yes, I updated the version of the webpack in the old project, and it works, the cause of the issue was webpack, Thanks Matt ๐
I just has the same issue as well. Downgrading Webpack from 5.11.0 to 4.22.0 also fixed it for me. gatsby develop was working but gatsby build would always stop with:
ERROR #98123 WEBPACK
undefined failed
Cannot read property 'includes' of undefined
I just has the same issue as well. Downgrading Webpack from
5.11.0to4.22.0also fixed it for me.gatsby developwas working butgatsby buildwould always stop with:ERROR #98123 WEBPACK undefined failed Cannot read property 'includes' of undefined
are you using graphql query ? can you share your codes ?
The error thrown by webpack doesn't provide any information as on where is this undefined.includes() happening, so by guessing it is in my code - I had to check it in all places where I use includes. But the problem is not in our code. I thought that sharing my findings will save someone a few minutes. The actual place where the issue happens is index.js of mini-css-extract-plugin.
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L113
This package receives a webpack.compiler config object and tries to call includes() method on compiler.options.optimization.splitChunks.defaultSizeTypes which is undefined. As you can see in the code above, it does it only if the webpack version !== 4.
In my case, I didn't have webpack as part of my project, but it was installed as a dependency of several other packages. All packages required version 4 or higher, but there is terser-webpack-plugin which requires v5, but only as a peer dependency. For some reason, it wasn't installed as a peer dependency, instead v5 was thrown directly into node_modules.
To workaround this issue I had to add npm install webpack@4.44.2 into my package.json to force it to install version 4 (though I don't need webpack directly in my code ๐)
status: needs reproduction
@LekoArts , here's a small repository I've created to reproduce the problem: https://github.com/arsinclair/gatsby-webpack-err-repro
@ibrahimgediktr I have many graphql queries but I'm not sure which ones would be relevant. I am using gatsby-source-wordpress-experimental, and TailwindCSS with PostCSS using gatsby-plugin-postcss. If any of that information helps.
I did a search and I am not calling includes anywhere in my own code.
I had this issue as well after using npm-check-updates to upgrade everything. This had moved my webpack dependency to 5.11.0. Going back to webpack@4 has solved the issue for me.
Not working: webpack@5.11.0
Working: webpack@4.22.2
Had the same problem & error. Webpack was installed in version 5 because gatsby is used within in a monorepo (nx). Downgrading Webpack to version 4 or removing it also solved the problem for me. Now, gatsby build runs without problems again, gatsby develop has worked without problems all the time.
I'll close the issue as the original issue was solved (if you use different casings for filenames, you must respect those as build systems like Netlify that run on Linux are not forgiving on this and are case-sensitive). The error is then coming from an internal part of webpack and we can't control that error messsage itself.
As the other reports are not related to that, but plenty of answers came in anyways:
Gatsby isn't compatible with webpack 5 at the moment. If you somehow override the internal version used by Gatsby breakages are expected. You'll need to resolve/force the version of Gatsby to v4 (e.g. with yarn's resolutions feature).
Not working: webpack@5.11.0
Working: webpack@4.19.1