Next js random error "Cannot read properties of undefined (reading'map')" - reactjs

So I am working with NextJs and facing random behavior. Once the application runs successfully, I do development and push code to Github. The next day I again run the app using npm run dev and face this.
So then I had to remove the repository and reset it again to make it work. But now today I am facing this again. I successfully worked yesterday, pushed the code to the git, and when I run this today I again face this error.
This seems to be something wrong with NextJS. Can anyone point out the cause?

For anyone else facing this annoying issue, #Pranta has already covered it. If it is random for you, and you aren't mapping anything, just do the following:
Delete the node_modules directory
Then npm install again.

Related

My Expo project suddenly start showing Typescript missing, install. Whereas I am not using typescript at all

I am new to react-native and expo stuff. I was working on an application that worked fine until I installed react-native-wifi-reborn.
I was following this article since I wanted to connect to wifi from the app (This was the requirement).
After adding react-native-wifi-reborn, my project started without issues until I got an error in WifiManager.connectToProtectedSsid usage.
It was a logical error and I made small code changes (I was passing the incorrect wifi password), restarted the project, and started getting the below error. I tried removing react-native-wifi-reborn and now I tried googling it but no luck. This error just won't go.
I am getting the below error whenever I try to run the project, it was working fine till now
My app.json
babel.config.json
package.json
Project Structure
Ps: I don't want to install typescript, not comfortable using it. Please help how to fix.

Github-Pages deployement issue

I have worked on an organization whose entire account was deleted by mistake but was later restored. Now I am trying to deploy a project in this org with gh-pages. Everything works or seems fine like to commits and all, unless I try to deploy the project. When I run the command npm run deploy the feedback I get is "published". But when I go to github and look for the website it says Error 404.
I have looked into the deployment log and found
this
I have tried every possible way to deploy a project using gh-pages and I have followed its procedure carefully. I found nothing useful which can solve this issue.
Thankyou in advance.

React-navigation installation error(following official docs). Unable to resolve module #react-navigation/native-stack

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.

Sveltekit adapter-static fails: Cannot read property 'kit' of undefined

I'm trying to build a Sveltekit site using the adapter-static.
npm run preview works fine and npm run build seems to build fine before giving me a cryptic error:
Cannot read property 'kit' of undefined.
Can you point me towards a way to debug this - I cannot find where exactly the issue is.
Svelte is still under active development. Most likely you're trying to use the latest documentation while having the older Svelte dependencies installed locally.
Upgrading your Svelte dependencies should solve the problem.
Try to create a new project with a fresh install of SvelteKit and adapter-static and then copy your code from the old project. That worked for me. Seems like the two were out of sync.

Next Build hangs forever

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"

Resources