I'm building an app with NextJs and Typescript. I'm trying to run next build (yarn build) on my local machine to check for typescript warnings and build errors before deploying.
Next build hangs at 'Creating an optimized production build' and hangs forever. Don't even know where to start to address this issue. Can anyone help with this?
Could be a cache issue.
I'd start by removing /.next folder, if it didn't work then both /.next and /node_modules. Whenever you have issues with Next you don't know how to approach or it's just acting weird - removing /.next will solve most of the problems.
Have found the solution to the issue. Apparently the build freeze was caused by empty files located all over my project directory. Removed all of them and next build runs
I had the same issue too.
I solved it by upgrading node version from v16.13.0 to v16.14.0.
Make sure you stoped all servers that running in the background
Use npx kill-port 3000
Tried all the excellent suggestions here, but for me the problem was with optimizing one of the external packages. Since performance wasn't a big issue for me, skipping minifying solved it.
You need this in your next.config.js:
const nextConfig = {
swcMinify: false, // 'minify' in Next versions < 12.0
}
And to make sure this works, I reiterated all the above comments to make sure I wasn't hanging on one of the billion previous attempts :)
So the issue with it was that I had an empty file somewhere in the app. Apparently the empty file was what was hanging the build
You can't have both dev and build at the same time.
I solved it very quickly when I realized that there were several
nodejs processes open when there should only be 1, and killing all the
nodejs processes that were running in the background solved it for me.
It can also happen that a build started to fail and got stuck in the background so you should kill all the nodejs you see running in the task manager. I am using Nextjs 13
I solved it downgrading npm version to v8.5.5. I was testing using v8.12.2 and it always keep in "Checking validity of types"
Related
There are a bunch of questions already covering this exact error, but I've been through all of them, and so far none of the answers have worked for me. Platform is MacOS
Here is the error:
Steps to reproduce
(Following official React Navigation docs https://reactnavigation.org/docs/getting-started/):
Create a new expo managed app
expo init my-app
Navigate to directory
Start the app
expo start
**** At this point everything starts and works correctly ****
Install reactnavigation(follow official docs https://reactnavigation.org/docs/getting-started/ )
yarn add #react-navigation/native
Install dependencies
expo install react-native-screens react-native-safe-area-context
Wrap the code with a Navigation container (per the docs)
Start the app
expo start
**** App no longer works. Fails with the error I posted earlier ****
Things I've tried that haven't worked
The instructions that the error message provides (though I skip step 1, as I don't have watchman watches installed). Main thing here that I would expect to work is the deletion of node_modules and yarn.lock, but no luck :(. Same with deleting cache
using yarn add to add the dependencies instead of expo install
using npm to install everything
updating expo-sdk (I'm already on latest)
reinstalling everything
So, I actually was able to answer my own question in the process of writing it. I often do this, as I make sure to spend several hours trying to debug in the process of writing the question and making sure I've covered everything I can think to try.
Not sure of official self answer etiquette, but this was a pretty frustrating error for me, so I figure I'll post what worked for me here in case it can help anyone else in the future.
Answer:
The issue for me had nothing to do with the code or app itself, but rather the IOS simulator. Force quitting the simulator and restarting resolved the error. It seems that simply ctrl^c -> expo start -> i -> r is not enough to clear the internal state of the simulator.
There was actually even a clue in the error message itself, but I missed it because the error looked so similar to the one I was expecting. The clue was in the name of the module it was unable to resolve "#react-navigation/native-stack". In my reproduction steps, I was only using the NavigationContainer, as I was trying to get that working before installing any of the Navigators and trying to use those.
Why was it trying to resolve the native-stack navigator? I'm not 100% sure, but my guess is that there was some kind of cache in the simulator that wasn't being cleared properly. Why do I think that?
This problem started with me trying to use a native-stack navigator in another app I'm working on. I quickly ran into this error, and figured the best way to debug would be to spin up a brand new blank app and try to get ReactNavigation working in there. I started with just navigation package and NavigationContainer itself, and once I couldn't even get that working, I assumed the problem was with the base react-navigation package installation. I failed to notice that it was still trying to resolve that native-stack navigator.
I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.
I merged my branch with master, git merge master, and had a few conflicts. When I did this, my app was running and threw parser errors about the <<<<<<<... lines as expected.
I resolved the merges and now I'm getting the same error, but there is nothing in my code!
I can search the project for <<<< and find nothing. I've restarted my app npm run start, even switched branches, and it's stuck there. Made a new folder and recloned the project and that cleared it out. Any idea why/how this happened? How do I make sure this doesn't happen again.
It seems that a cache problem exists between webpack cache and resolving git conflicts.
the solution is:
stop your app
remove node_modules/.cache
start your app
It's possible that when you were trying to resolve the merge conflicts, pieces of your code were not marked as resolved.
A personal tip:
Using a GUI interface when resolving merge conflicts will help tremendously.
Applications like Github Desktop or using Github's own merge conflcit resolve will help better see your changes.
I am using a package named react-native-linear-gradient which can be found here. I had to go through quite a lengthy process to eventually get the link to my project (by manually linking via the Binary link with libraries in XCode. I got it working fine, however, each time I install a new package via NPM, linear-gradient is removed from my node-modules folder.
1.Can anyone shed some light on why this is happening? (Happy to provide additional information)
2.Will this impact deployment of the application if this is not solved?
SOLVED: Downgraded to 5.7.1... It seems 5.8.0 seems to cause the same error Michael mentioned.
In the very beginning, I created the AwesomeProject. Later when I use command
react-native init MyProject, it only created a package.json there. Before that, it could create other files, but very slow.
I searched some ways to fix it, now it only create one file.
It's a known issue that has been fixed (be sure to update react-native-cli): the command seems to hang forever nothing seems to be downloaded.
Try using react-native init MyProject --verbose to see what's happening and/or keep trying. The issue is not coming from your config.