Try removing .next and try again

Okay so I removed the .next file and ran "npm run dev"

Same error

Actually got this first

Then the same error

What is your nextjs version

Upgrade to latest if you are not in latest version

13.4.19

used this command: npx create-next-app@latest

Project was created less than an hour ago.

Node js is also on the latest version

@joulev do you think downgrading to a lower version would work?

Are you using typescript? What does your tsconfig.js file look like? also, what are the contents of your public folder (if you have one) ?

I've run into favicon issues if I had a favicon saved in both the public folder and the app folder.

Using Javascript:

Favicon is only in App Dir:

What are the exact commands you use to run it? Make sure to run npm install before running it.

npx create-next-app@latest

and i ran npm i aswell

Actually I ran npm I after running npm run dev

Should I try reversing the process?

try npm i && npm run dev

Okay, generating a new project, will let you know.

@Toyger the erorr persists,

what options did you use when generating the app?

powershell

I meant these. I just created one with the following options and it runs without issue.

Kept it to a minimum to reduce build time

Is build time really that bif of an issue though?

No

i'm getting this same error right now as well, my project was being run with npm run dev perfectly then all of a sudden all my routes got these errors from imports at the top for absolutly no reason..

Just wanted to test your theory

Please don't take this the wrong way, but this is a comfort to hear, I have been struggling for 2days on this.

hahahaha i get u

but now im kind of freaking out because this is a saas project not just a personal one

Please note, the error persists even when I select everything

idk what's going on and im new to next

what if you delete the favicon file?

I am also new to it, maybe that is the issue.

I did that and it gives me google package errors

and if you delete .next and the favicon file?

Let me try

nothing happened

You got this error all of a sudden

Yes

Actually no

yeah

i got it all of a sudden

This happened after upgrading to the latest node js version

I ran a deprecated version of node js before

this is what i see now after deleting favicon and .next/

maybe that unexpectedend of json means something

Very different from mine

What node/npm version are you using?

delete .next and node_modules install packages again and try to start

will do

ok

@Toyger the version I am running

i dont think it has to do with the nodejs version

cuz both me and @Bengal are getting the same importing error

so it has to do with import aliases if i had to guess

mmm, that could be. Could you send the output of this just in case: **

Does it happens with node 18?

If @Bengal jsut created a brand new app though, then everything should be in order.

@American Crocodile What does your config.js file look like?

did all that, nothing new happened

can u tell me where to find it again please?

After I deleted the file ran "npm i" and "npm run dev" @dumbboy

@American Crocodile if you add a / after one of those imports, does it change anything at all?

ie: import App from '@/my/import/path ?

next.config

thats what im doing

it wouldn't import previously if i didn't do that

no

im on vanilla js

Isn't it what this file does?

It should be redirected to app right? Nevermind

yea, I misread the image that was sent earlier. i thought there were no slashes in it. It won't work without the slash is all.

i'm kind of (very) upset cuz idk what i did to cause all this

i wasted so many hours ugh

I wasted days

twinniiiing lol

Do you have WSL installed?

no?

idk what that is

yes

Windows Subsystem for Linux

I saw that WSL was recommended

I personally use it and it works quite nicely. It just gives you a linux environment to work in instead of windows.

if @Bengal has it and has the exact same issue i am dealing with, then i dont assume that that's what im missing

@American Crocodile you are randomly getting the error out of nowhere?

yes

i did absolutly nothing

My WSL has been giving me issue, do you think it is related?

maybe i created a new directory file in my dashboard but that's it

I don't know if it will make a big difference, but maybe.

What kind of WSL issue?

@American Crocodile try npx next info

oops

wrong tag

Can't reproduce this, I'm on Mac.

@Bengal try npx next info

Are you getting the error only on this project or any new next project?

i haven't tried creating a new project

let me do that and see what happens

eh nothing wrong with it

What is the output of Get-Host ?

The error is a popup in the bottom right, I have been ignoring it for the longest time so I can't remember, maybe something about being to old. WSL

lol ok that doesn't tell me a lot 😅

Could it be this?npm install next@canary It says it is not the latest version

Sorry man

I doubt it. But I don't really know for sure. Can you run Get-Host ? I'd like to know the powershell version

dummy project works perfectly

what did i do omg

Please remember, please

Delete package.lock, modules,.next and try to install packages again.

I did this, error persists

that's the thing, i did NOTHING at all and when i saved some tailwind changes it just started freaking out

Are you using VSCode? Take a look in the botton corner and look at the line endings. My guess is that it makes no difference, but just make sure that they are aligned for any files you edited.

so do i delete both of those then npm i again?

Lint issue?

Yeah, three

Ok, yea that looks fine.

mine is fine too

looks like i'm going to have to rebuild from scratch :)

(:

I don't know why but I don't think this is a NEXT problem maybe a problem with the dependencies

You can try it, IG it will take max 30 min

welp

it is what it is

I don't think it's a next problem either.

@Bengal What do your imports look like in page.js and layout.js ?

@dumbboy @Toyger do you think it is because of the c# in my path?

you could try a differnt path

Could be ig

not sure what windows thinks of that.

ok, those are fine.

I have run ASP.NET core proejcts in this dir, so windows should have an issue.

Try to do it on completely different sir like desktop

dir? ok

will try

Yeah

Yea, something that is ideally very short. It looks like some of your paths are getting quite long, and windows sometimes complains about paths that are longer than 260 chars

Trying it in this dir

FYI thanks for the help I am enjoying this troubleshooting session.

It is loading longer than usual maybe that is a good thing?

That's completely fine, next 13 dev is slow TBH

dev mode can be very slow

prod is way faster

looks like it works?

Yeah

@Bengal You there?

@American Crocodile you could try something similar.

It doesn't look like anybody has ever faced this issue except for me and @Bengal

Yes

Pioneers my brother or sister

Lmao

I have been googling for the longest time and npm module not found errors are common, just not this one

@dumbboy Still loading

Okay, progress we have a new error.

This is good

Node version is 18 right?

the next file is still there

Yes

Okay, I will be back in 5 min

I'm sure this issue has to do with imports and how next interprets how we import at the top of every file but I'm not sure how I can check what type of "way" next checks my import syntax

@American Crocodile try changing you proj file to something with a shorter path, no spaces or symbols

It's already like that

Hmmm

To be honest I'm not positive you guys have the same issue. Was yours also complaining about the favicon, @American Crocodile ?

I'm complaining about every import in every file

I said that before

@Toyger I have the same issue, imports errors

Cuz if I change what I'm looking at, like instead of dashboard I try to enter (settings) in the url there's also gonna be an import error there

@Bengal could you stop the other version you have running and restart the new one, then open http://localhost:3000 ?

Is there any chance it's related to this: https://nextjs.org/docs/messages/invalid-project-dir-casing

Totally unrelated, can you try opening it in http://127.0.0.1:3000 instead of locahost

Good call. This thread might not be helpful but perhaps it could provide some insight: https://github.com/vercel/next.js/discussions/33299

@Toyger restarted vs code and got the WSL error

That's not error

If all else fails, I wold strongly recommend trying it in WSL.

@Bengal ok I see. That's just a warning.

But, it means you have WSL installed.

if you run wsl from powershell then you'll have a wsl console

Yup

and you could try from there.

You will need to re-create the project, but it might help.

OMG GUYS

I think I found the solution

so basically

Please share

i tried changing the import alias from @/component/url/here to ../component/url/here and it worked

so as i said before

it's with the import alias in jsconfig.js

So, issue with path alias, can you mention where your component folder is?

but it should be good idk why it's not working

this is my file structure

looks good

yes

now

Wait i don't understand

why is jsconfig not working

can you paste the jsconfig.json file.

Wait, are you using a src directory now? You weren't before.

what should i do cuz i'm not about to change 200 imports from @/ to ../ lmao

It works

Why

You could also specify baseUrl: "." which might help @American Crocodile

@Bengal is that in wsl?

What is happening @American Crocodile

@Toyger No

WSL failed

what's the difference between baseUrl and "Paths"

I need to set it up first

ok gotcha. Paths will specify paths relative to the baseUrl

I love Linux, so will definetly do this

Okay, so when I create a new next js proj, I will have to manually config this?

Ok so now I'm sure that my issue is "why is next not recognizing the @\ import alias

And I'm sure cuz previously when I used to write @\ it would autocomplete and open a dialogue of my possible imports from that file

I don't think the baseUrl is the issue, I have created new project with the same jsconfig.json file, I have no issues.

Where does next import the jsconfig file and read it? @dumbboy

TBH IDK too, it's internal stuff

Can u show me ur tsconfig@dumbboy

Looks exactly like mine

Yes

So what is wrong with

sorry

why is it referencing src/*

is it because I chose the src option during create?

Yeah

Because ur using the src directory

So basically it is src or app?

not both

both

just organizing all code related folders inside src. like components, lib,utils instead of keeping it in root directory.

Noted, I understand

Thanks everyone

BaseUrl will just tell your config.js what you mean by . in the paths. It gives it a reference. You don't have to use it though. It looks like everything is working then?

Petrone alias paths still not working IG

The component file, should it be in src or app?

src

okay

Ahh. I don't think that everything should be inside src. Just the app and components folder. The config files should be outside it.

Oh didn't notice it

like that

I may have found a solution on GitHub I'll tell you if it works

Did it work @American Crocodile ?

im trying to find how to do what they said

Can you send me the issue link

1 sec

This is the exact same issue I had

It's jest issue, not next

I know but the same import alias issue should be similar no?

IG no, it's working for him in dev server, just jest is the issue

So now what... How do I fix my import aliases

Like it's not reading that it should be @\

Can you send any page import code of your files

This image shows the imports at the top of the file where it can't read them for some reason

like this for example

it doesnt know what Themeprovider is

@/ is not working?

yes

when i changed it to /../..componentxx it works

can you show your project structure

you have to understand, my project structure is fine, my project was working perfectly earlier today

and before, it opened an options menu for different files after i typed @/ and now it doesnt do that anymore

could that be a vs code issue?

like a linting issue or something

it can be, you have any other editor?

no

Did you try to create next next project with same config as current project and install necessary packages and just copy paste.

i dont wanna do that

i did alot of things

for this one

Yeah, I can understand

You sure, you didn't mess with config files, before this issue came.

nope

i didnt do anything at all

i remember i was modifying some tailwind in my components

okay, weird.

Didn't install any packages, changin node versions?

no

any vscode.json configs?

where do i look?

If you had messed with it, it will be in you root folder.

no

i hadn't

can you run npm run build and npm run start. Want to check if alias is only issue with dev server or not?

Ok

Running build rn

If it doesn't work I'll call it a day and just go again from scratch tomorrow

WAIT

It says it can't resolve the alias again

On build

Okay, Sorry to say, but IG you can just create it from scratch and set it up in 1 hour.

It is what it is haha

Thanks for taking the time tho

Should be frustating, but what can we do.

All the best

@dumbboy i fixed it lol

Congrats 💪