I am currently working on a nextjs project. The nextjs project is a bit older and used initially a _middleware.ts file in the pages directory. A while ago, the older nextjs version came in conflict with an update that we wanted to do. In order to get it working, we had to change the name of the file to: middleware.ts(without the underscore). Everything is working fine in development. When running npm run dev the following warning is displayed:
warn - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
until the actual build. When building, the following error is displayed:
- Collecting page data .ReferenceError: self is not defined
at Object.<anonymous> (/Users/****/**** Dropbox/**** ****/Mac/Documents/GitHub/******.com/_next/server/pages/middleware.js:1:1)
***
> Build error occurred
Error: Failed to collect page data for /middleware
According to: https://nextjs.org/docs/messages/middleware-upgrade-guide, the middleware file should currently be placed in the root directory (next to the pages folder). when moving the file middleware file to this directory, the error displayed while building does indeed go away, but when using npm run dev a white page is displayed containing:
style data-next-hide-fouc="true"body{display:none}/style
Moving the middleware file back to the pages folder, everything works fine in dev, but the page can not be built.
I have tried different things, among them:
I ran npm i eslint-config-next#latest --save-dev according to the above mentioned page, trying to make sure that I am running the latest nextjs verion. (When running npm next -v this although displays: 8.11.0).
I made sure that there is no assetPrefix defined, neither a basepath (Next.js Error Getting 404 When Fetching JS Resources After Refresh).
I added: <body style={{ display: "block" }}> according to this: https://github.com/vercel/next.js/issues/10285 . This only displays a plain version of the website (all styling is gone).
I made sure that there was no cypres being used to mess with the clock. This does not seem to be the case.
Any help is appreciated.
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:
My problem: I am able to build a nice website locally using Jekyll and the Skinny Bones theme, but when I upload my contents to GitHub the build fails.
System information: Running macOS 12.5, Jekyll 4.2.2, most up-to-date version of gems (managed by Bundler). Clean install of everything this morning.
What I've done:
Downloaded all relevant software and built out a GitHub Pages repo
per these instructions and the GitHub Pages instructions.
Cloned the project (let's call it project.github.io), unzipped the Skinny Bones theme inside that directory, got everything set up.
The directory now looks like:
Gemfile
Gemfile.lock
README.md
jekyll
_site
_pages
_layouts
a whole lot more
I build everything how I wanted it, navigated to the jekyll folder, and built it using bundle exec jekyll build and checked it interactively using bundle exec jekyll serve. Everything worked well, no errors, functioned as expected.
I then navigated to the project.github.io directory, added everything and pushed it successfully, then got the settings configured for GitHub pages (e.g., set it to the right branch, etc.).
This is where the problem occurs. I notice that the build failed, examined the error log, and see this in the output, two lines:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'jekyll/css/main.scss': File to import not found or unreadable: variables. Load path: /usr/local/bundle/gems/jekyll-theme-primer-0.6.0/_sass on line 10
/usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:123:in "rescue in convert": File to import not found or unreadable: variables. (Jekyll::Converters::Scss::SyntaxError)
The build has therefore failed, and my pages are not rendering. Furthermore, these are supported dependencies, per the GitHub documentation. I have verified that I have the same version of theme-primer installed.
Can anyone help me diagnose this problem?
I have solved this issue. The problem is that even though I was pushing all material from the parent, I was building locally from a /blog subdirectory inside my project.github.io parent directory. This was cloned directly from GitHub. When I tried to build locally from the parent, I got the same error as I was getting on GitHub, which tipped me off to what might be going on.
When I moved everything up to the parent directory level and rebuilt from parent, everything worked as expected and just as it did from initially building inside /blog. I pushed to GitHub, the build process completed, and the GitHub page was served.
Hopefully this will be helpful for someone else who might have this issue. Jekyll is adamant about directory hierarchy.
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.
Suddenly some of my css variable names on SSR build on server are being changed to something else and not working.
For example i have
.color-black-75 {
color: var(--black-75-color);
}
in my styles.css but when i build project on server in browser it turns to:
i checked out to older commits from 1 month and 2 month ago but this is still happening.
everything works fine when i build project on local ( with docker ) but on server this is preventing some css classes from working.
First find and replace corrupted classes in *.css with correct classes in dist folder so the project will work fine on server until we find the real issue.
Then if project is being built fine on your local then the issue should be about Package.json package versions or your Dockerfile installed application versions so you can copy your local package-lock.json file to server via scp and then push your local docker image and then pull on server so these issues would be fixed.
The real issue in this case was a package version update which you could find with comparing local package-lock.json with server package-lock.json and then removing ^version and ~versions from package.json and use exact version so over time your packages won't be updated and won't cause any issue.
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 😄