The Problem:
next.js is failing to run the build command, even though I can run it in development mode with no problems. Its saying there is a missing semicolon in the css. Of course there isn't one, it wouldn't compile in dev mode if there was. And for general information, I am using css modules for this project. So all my css is name.module.css.
here is the warning the console gives, and it is the entire stack trace. Doesn't change if I run --debug flag either. and Im running npm run build
which corresponds to the script "build": "next build"
in my package.json.
> projectName@0.1.0 build
> next build
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
Failed to compile.
HookWebpackError: <css input>:61:1: Missed semicolon
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/build/index.js:17:924
at async Span.traceAsyncFn (/Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/telemetry/trace/trace.js:6:584)
What I have tried:
First I looked up the issue here. I found a few posts with similar errors.
Post 1 From post claification: this is my full stack trace shown.
Post 2 I ran npm install
and it found nothing to update. and changed my import to "next/app"
instead. Didn't help either.
Other than posts I did a dive into the next.js code in node_modules to try to understand what was happening and I got no where because its a webpack thing, which I did not realize. I also saw another post that I cannot find that said that this error happens with importing google fonts sometimes, so I commented out all my google fonts and this is still happening. I do not quite understand how it could give errors on build but not on dev.
Closing thoughts
I suspect that something is being imported into some file somewhere, as that seemed to be the issue in the other post I read (the one I cannot find), however I cannot find it. That or my lack of next.config.js file is causing the issue ( I am a next.js beginner). Also, I am using typescript, if that helps.
Any help is really appreciated.
Thank you everyone