NEED HELP: Next js deployment failed with error - why?

Hi there,

I just tried to deploy a Next js application on Vercel, but I got an error and I am not sure what went wrong. The error I got is this:

I dont understand why the .navigation within the Header component could not be found. It works just great and it is part of the application.

Can someone help me to figure out the issue?

Thanks for help!!

Can’t anyone help? How to deal with this bug?

I checked the console again and there I get this warning message:

It seems that it has something to do with the webpack loader?

Please let me know if you have an idea what is wrong here…

although I think I am wrong, but isn’t the issue in node_modules meaning that the installed dependencies have issue

so clearing the dependency and installing it again should help. while if it doesn’t help wait for more experienced developer :sweat_smile:

Edit: I found stackoverflow quest that say the issue is in his package here is the link: javascript - postcss-preset-env: end value has mixed support, consider using flex-end instead - Stack Overflow

As far as I can remember I did not upload the project with node_modules folder.

When we deploy a Next js project we dont need to upload the node_modules folder, right?

Thanks for the link to staackoverflow, I will fix the wrong CSS styles. However this is not the reason why the deployment failed.

When we deploy a Next js project we dont need to upload the node_modules folder, right?

yes you are right :sweat:. when you find out what is the issue, please share it with me.

After a few hours of trouble I finally figured it out…

The error occured because the import from the navigation was written in a lowercase letter instead of an uppercase letter at the beginning:

import Navigation from './navigation';

import Navigation from './Navigation';

A lot of trouble becuause of wrong import which actually works just fine on my local host server, but failed when I tried to deploy the application.

AARRGGHHHH …

1 Like

God, that felt so depressing. :rofl:

Good job finding it, and thanks for sharing

Hey @kazooi, I know you have resolved the issue, but If you want I can share some insight on why they happened.

1 - Casing of the import, and why it matters.
Some OS are case insensitive, like Microsoft and MacOS, but Linux on the other hand is case-sensitive.

So on a Windows/Mac looking for a ./navigation folder will work. But when deploying/running your code in a Linux environment won’t work because there’s no such folder with the lower case n.

2 - I did not upload the project with node_modules folder

You are right, you don’t upload them… but that doesn’t mean they are not used.
Vercel (or any other service provider) will build your app and then deploy it.
Building means also building the necessary node_modules, which will end up in the production build, thus in the code shipped to the client.

Hope this helps :+1:

1 Like

@Marmiz Thanks for this information, highly apprechiated! :slight_smile: