I want to deploy my react app on vercel but while building is happening it shows this error:
I tried to capitalize app.css to App.css but nothing changed
This is an old question, but I experienced this issue with a new project I deployed today on Vercel.
Too resolve it, you just need to change your 'app.css' file (if you have one) to 'App.css' and then re-run your build. Redeploying to Vercel should then go through fine.
Related
This is the error I am getting on browser when trying to run my NextJS app which was running fine until I installed sanity.io using npm. There was a new folder created for sanity in my nextjs app which had its own node_modules, I tried going back to when my app was working fine by deleting this sanity folder from my nextjs app. I also tried deleting the node_module folder which originally was present in my next js folder and then ran npm install, however, that does not seem to solve the problem.
Also getting this error in terminal:
I'm trying to npm run deploy on my project where I'm storing the minified font-awesome css file and I'm getting the following error:
Creating an optimized production build...
Failed to compile.
./src/assets/css/font-awesome.all.min.css
ParserError: Syntax Error at line: 1, column 30
The app works fine on development sever.
The error shows whether I'm importing the css to the main css file or the main js file.
I only found some related old posts with potential solutions for a next.js project and yarn like in this link: https://github.com/vercel/next-plugins/issues/310
This is a react project and I'm using npm.
Any suggestions?
Can't comment on this unless there's more information regarding module-bundler and what is the configuration for the same. As it's treated differently according to module-bundler.
I would suggest you to use official package of fontawesome for react #fortawesome/react-fontawesome
PS. Module Bundler configuration should not be changed without proper knowledge as it can make whole application crash.
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 😄
After deleting node_modules and reinstalling npm I am still getting the error "The default export is not a React Component in page: "/" " at http://localhost:3000/. When I run npm run dev in terminal everything goes fine until I go to http://localhost:3000/ and get the above error. Would anyone be able to help with this?
Had this up a running sometime last year on MacBook but now that I've returned to it I can not get next.js to work properly. Thanks.
Here are the exact commands I used as well as files created in VS Code :
Update:
deleted node_modules and package-lock.json and used command npm i from hello-next folder. Here are the errors I received :
It comes when you have not exported the component you trying to reach through the route. For example, http://localhost:3000/show in this, you need to ensure that in file "pages/show.js" you export the component. For ex.
export default () => {
return "Show page working ! ";
}
Hope it helps.
Created a default project without modifications, no build errors, but it failed to run and showed errors when running Ripple-Nexus(Galaxy).
As mentioned in here copying your config.xml into your www directory should resolve the ripple.js not found error.
Anyway it seems that the Ripple Simulator works well, even if you get the error, so in the end I found myself ignoring it.