Error on clean install

[thany]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

14.18.2

What browser are you using?

Firefox 94

What operating system are you using?

Windows 10

How are you deploying your application?

I'm not

Describe the Bug

Error appears after a clean install with typescript:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
[etc]

Expected Behavior

No error, I guess.

To Reproduce

Run the following command and give it any project name you haven't created before:

npx create-next-app@latest --typescript

Then, start it:

npm run dev

This will produce the error.

[thany]

Actually, I just tried to literally follow the quickstart, so I nuked my project directory, and recreated it using the command from the quickstart:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/basics-final"

Same error.

[thany]

Also, updating Node.js did not help. I'll update the bug report.

[thany]

Oh I just noticed I'm also getting errors like this in the CLI. I didn't see em before because the "invalid hook call" was flooding the CLI.

./node_modules/react/index.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Projecten\nextjs-blog\node_modules\react\index.js
    Used by 37 module(s), i. e.
    D:\Projecten\nextjs-blog\node_modules\@next\react-refresh-utils\loader.js!d:\Projecten\nextjs-blog\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[2].oneOf[2].use[1]!D:\Projecten\nextjs-blog\node_modules\next\dist\client\router.js
* d:\Projecten\nextjs-blog\node_modules\react\index.js
    Used by 13 module(s), i. e.
    D:\Projecten\nextjs-blog\node_modules\@next\react-refresh-utils\loader.js!d:\Projecten\nextjs-blog\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[2].oneOf[2].use[1]!d:\Projecten\nextjs-blog\node_modules\next\dist\pages\_error.js

I don't see why the two are different. I'm on Windows, which is case-insensitive. If there's any OS where this shouldn't happen, it'd be on Windows. The two directories mentioned there are identical. And yes, I can see the drive letter differs in casing. I can't help that. That's just absolutely unfixable. It depends on... Something. It just happens to be either upper or lowercase, and frankly in my 26 years of using Windows, this has never been a problem. So that's why I say this is a problem in next.js.

But then again, I'm not sure if this has any merit to the original bug. These might be harmless warnings. No idea.
(not that they shouldn't be fixed - they absolutely should be)

[balazsorban44]

I could not reproduce this locally with the provided steps. Do you maybe have react installed globally or have you used symlinks?

[thany]

I don't have react globally installed. As for symlinks... Uhm, I'm not aware of having created any. Where would they be? How do I check?

Is it possible that this is fixed in Node.js 16.x? I'd rather upgrade only if absolutely neccesary right now, as I'm using a system install, and don't know for sure if it will break other projects. I'd have to take some time to check them first.

Btw, I find it really strange that you can't repro this issue. I was able to reproduce it, time and again. I don't even know how not to reproduce it 😞

[balazsorban44]

Have you accidentally run npm i -g react or yarn global add react?

you could try to run npm uninstall -g react or yarn global remove react to be sure.

What version of npm yarn are you using?

[gonzalobarria]

I have exactly the same problem and I haven't installed react globally.

[thany]

Have you accidentally run npm i -g react or yarn global add react?

you could try to run npm uninstall -g react or yarn global remove react to be sure.

I did that, but like I said, I don't have react installed globally. And indeed, it did not help.

What version of npm yarn are you using?

NPM v6.14.15, as it comes with Node.js 14.18.2

[gonzalobarria]

I downgrade the "next" version to "^11.1.2" and the problem dissapear. I have that problem from "^12.0.0"

[thany]

A bit of an update: I can reproduce the issue, but only on a different drive than C, for some reason.

So installing Next.js on a C-drive works fine, installing it on any other drive, produces the above errors. As far as I've tested anyway. It doesn't appear to make a difference what kind of drive it is. In fact, both C and (in my case) D, are completely normal internal drives. But even a SD-card (heaven forbid developing on that...) or a mapped network drive cause the same problem as my D-drive. This makes it extremely unlikely (although still a nonzero chance) that my individual D-drive, or the way it's registered or something, is the cause of the problem. They can't all be problemtic in the exact same way across multiple computers (I've checked that too).

It appears to have more to do with the fact that a D-drive is, well, not the C-drive.

So... What's next? (pun intended 😀)

[etapic]

I tried to do simple clean install rom documentation aka
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

on folder : c:\dev\boilerplate\next\nextjs-blog - didn't work (I get same errors as post author)
on folder: C:\dev\nextjs-blog - works fine

Not working version errors command line, including error stack at the end

Browser (localhost:3000)

[thany]

Yeah.

Something is wrongly assuming the drive letter, which is ALWAYS case-insensitive, to be part of the module identifier in a case-sensitive way.

Either upper-/lowercase the driveletter before doing such comparison, or don't cause a difference in casing in the first place. It's not like I'm deliberately somehow changing D to d. I can't even do that, because Windows drive letters are... say it with me... case-insensitive.

[thany]

Another update: I upgraded to Node.js 16.13.1 and did a totally clean installation:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

The nextjs-blog directory didn't even exist yet. Then in the very same command prompt cd into that directory, and start npm run dev. Boom, same problem yet again.

So we have observed:

1. This problem is entirely reproducible, as long as I'm doing it on a D drive.
2. This problem reproduces on different pc's with a different setup (i.e. not clones or whatever).
3. This problem is not dependent on a specific Node.js version.
4. This problem has nothing to do with spaces or other non-alphanumeric characters on its path.

Fairly safe conclusions, for now:

1. This problem is a bug. Not a discussion, not a misconfiguration, as I'm fairly well convinced I'm doing things correctly.
2. Next.js is virtually useless to me, and presumably to anyone having their projecs folder set up not on the C drive.
3. Because of (2), this bug should enjoy 'blocking' priority (or whatever name the highest priority has), because it is literally blocking development.

Questions remain to be answered:

1. Why is there a discrepancy between d and D in the first place?
2. Why is there logic determining that there might be an OS out there with case-sensitive drive letters? (hint: such OS doesn't exist)
3. Why has this discussion not been put back on the issues list? It was converted from there, with which I never actually agreed, but hey, I'm not the maintainer.
4. What is the general progress/status of resolving this bug?

[thany]

Okay, so as for observation 1 - this appears to be slightly different from pc to pc. The underlying problems is likely the same though.

[sigma54-ca]

I'm also getting the same thing with Win10, Node 14.18.1 and Next 12.0.7 on C drive. Not sure why it just started today though!

[nicolasdeory]

Can confirm that the issue doesn't happen on versions < 12.0.0. I have my project in drive D. The app works when running it via yarn, but it breaks when debugging with VSCode.

[DreamEcho100]

I had the same problem
So I upgraded next to the latest release npm i [email protected] and it fixed my problem

[thany]

Maybe that one should be released as a stable version ASAP

[balazsorban44]

Reminder, that 12.0.8 has been released as of yesterday.

[thany]

Which doesn't solve the problem. Or at least not for me. And not on purpose for anyone else, I imagine.

[thany]

@gonzalobarria So what now? This discussion is filling with workarounds that are shoddy at best (using an alpha version, or an older version) and people having the same issue.

Not only has this problem been going on for quite a while now without people able to use Next.js at all, it's also really emabrassing if following the Getting Started guide to the letter doesn't work at all. I shouldn't have to re-emphasize how utterly critical priority this issue has, or should have. *

What is the next step in getting this resolved, please?

* Yes, I know my tone of voice is changing, I am getting annoyed by this - I just want to use Next.js already! It's too brilliant to be destroyed by such a stupid and (presumably) small bug!

[balazsorban44]

I'll assume you actually tested those alpha/older versions to make sure we can pin down which version might have introduced something?

You could do npx create-next-app@exact-version and see if you can pin down a version. That might be helpful.

[thany]

Please give a list of versions I should try then. I don't think I have any way of knowing which exact-version to try.

[balazsorban44]

This was just an assumption/suggestion based on this comment #32034 (comment), that is saying this worked in previous versions. So it might need more investigation.
Here is a list of versions: https://github.com/vercel/next.js/tags

You can use a "binary search" technique (so you don't have to go through all the versions), and point out the exact version this is failing. Start with a relatively old version (Say a Next 11 version), and see if that works. If not, you could try to go even further, but it might be an indicator that the issue is maybe not with Next.js.

[thany]

Since there was a report that 12.0.8-canary.20 might work, I tried that one first. Same deal.
Then I decided to go older, as you suggested. 11.1.5, the newest 11-version I believe: same problem.
An even older version, 11.0.0: same problem yet again.
12.0.8 (final) I tried as the last one for today: same problem still.

This indicates two things to me:

1. The problem has existed for a very long time, which might mean that anyone who has this problem with Next.js has just "walked out", so to speak, because it is the very first step that breaks things. This might be the reason why it appears that I am one of the few having this issue.
2. It's possibly a problem in a depedency. I'm not saying I was wrong, because as a user (well, aspiring user) of Next.js, it is still Next.js spewing out these errors to me, while all other frameworks I've had so far work totally fine. You cannot deny that if only one framework has this issue, the user will blame that framework and/or assume it as a point of contact to whichever depedency, if any, this issue is introduced by.

[balazsorban44]

I gave a couple of pointers in #33234 (comment) See below:

Sounds like a rogue react package is interfering with your project.

This kind of issue can happen if you have used yarn link or npm link.

Does this reproduce on multiple machines, or only on yours? Since you mention "our pc's", could you please check this on other devices? That would indeed be helpful since we could narrow this down to either OS or user config level.)

You mention TypeScript, is this an indication that the issue does not reproduce when you don't set the --typescript flag? Can you reproduce the problem without it?

Others have suggested try upgrading, but you seemed to be frustrated that this is only available on canary. Today, we released a new latest, (12.0.8 as of writing), so you might try again. If that does not help (considering this issue was reported to already use 12.0.8), checking canary is still a good option, as it would indicate that the problem is indeed already solved, we only need to cut a new latest release.

The actual shown warning could be useful: https://nextjs.org/docs/messages/invalid-project-dir-casing

I can also see there is a discussion already opened by you here: #32034

Since this is not a confirmed bug and there is no reliable reproduction, let's continue the discussion there, since it has already started.

I'll reach out to our team to see if anyone has a better idea about what is happening.

Further, I kindly ask you to refrain from negative/demanding phrases and have a read of our Code of Conduct.

[thany]

I'm not cd'ing to anywhere. I go into my Total Commander, because I'm a nerd and any other nerd should also use it, and run cmd.exe from there. Specifically, I press ->, type cmd, and press Enter. All on the keyboard. I've opened command prompts like that since I started using it when it was still called Windows Commander all the way before Windows 95 was even rumoured.

Doing the same thing on the C drive gives me an uppercase C drive letter. But as you can read above, there are others with the same problem on the C drive, and I really don't know how to get a lowercase C drive the way I spawn command prompts. Going c: doesn't give me a lowercase C either... Weird huh?

So, it's not like I'm doing anything weird. At least not in my mind.

When I start a command prompt from VScode, it seems like it always gives me an uppercase D. I don't remember if it always did, so I'm sorry if I made it sound like that too broke Next.js. But, before I even have a project, I of course don't start a command prompt from VScode, because that needs a project (or at least a folder of some kind) to run it in. So I kind of have to start the initial command prompt the way I've done for over 30 years... (I feel old now 😀)

Surely I don't have to go Start->Run->cmd->cd <whereever>, just for Next.js? That would be much of a faff to workaround a problem that doesn't need to exist, iyam.

I do, however, recognise the elegance of case-sensitive filesystems. But that is just not how Windows works, and we have to deal with it somehow.

[balazsorban44]

For the sake of the argument, would you try another way to verify that it only is an issue in certain workflows?

You did mention a team, are they able to reproduce the problem or is it specific for your setup after all?

[thany]

I can ask around, but it's the weekend for me now. I'm doing this in my free time because I like experimation, but the team I mentioned might start using Next.js when we upgrade our customer's website from Sitecore 9.2 to Sitecore 10, which has support for it.

However, I am happy to say my own work pc doesn't have this problem because it only has a C drive as far as drives go that are fast enough for NPM 😀 But I've checked other drives (networked stuff) and they are lowercase again, so I suspect anyone with a secondary SSD or a partition, is going to face this issue. I can't say for sure it this point. But because of that, and because everyone develops on their C-drive as far as I can tell, it's possible (though not guaranteed, see people above who have this issue on their C drive) that most folks will not see this problem. Maybe.

I hope that answers your question 😬

[thany]

Btw, for the sake of argument: is it possible to remove the check for (and resulting errors about) casing when on Windows?

[thany]

In the mean time that someone is hopefully tracking down this problem, I had an epihany. I tried installing a project (like the tutorial one) on my C drive, then moving the whole deal over to my D drive, and starting it from there.

Same problem.

Then why is this an epiphany, you say? Well, because this proves it's not the installation process that throws bollocks into it, but the build/runtime process.

And as we speak, I am now magically able to reproduce the problem on my C-drive as well. Darnit, I was just getting through the first few lessons 😟

I honestly genuinely don't know why or how my drive letter is now lowercased, but it is. And I can't "make" it uppercase. Because let's sing it all together -- Windows is case-insensitive. That's why d: doesn't bring you to a lowercase D-drive, and D: doesn't bring you to an uppercase D-drive. There's no way other than to restart the command prompt, and fall to your knees to the Gods of, ehm, something, to hopefully get a driveletter that Next.js likes.

[Jeff-Russ]

I was able fix the problem renaming a directory in the full path to my Next.js app. First, I should note that I am using macOS which has an unusual practice of allowing / forward slashes in file/folder names when set in the Finder (macOS's file "explorer") which are actually inserted as : colons if you show these paths in (bash or zsh) terminal. I noticed some colons in paths above, although I'm aware the naming rules are different in Windows. In any case, my path had this character and got the same error, just after running create-react-app and then npm run dev

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
[etc]

Changing the path to replace the colon with _ underscore fixed the problem. If I put the colon back in, the error reappears. Seems like strong evidence that this is the source of the problem to me...

[thany]

It's a different problem, but the underlying sentiment is the same. It's just how your OS works with paths, and Next.js is going to have to deal with it, if it really needs to make it into a problem (which it doesn't need to).

[thany]

Possible workaround:

If you're using Total Commander, and you keep ending up with lowercase drive letters, which is what is exposing this bug, the workaround is to get them uppercase. But that's easier said than done. Luckily, I found that Total Commander has a hidden setting for this. In a nutshell:

[Configuration]
DrivesShowUpcase=1
DrivesExportUpcase=1

This will, of course, not fix anything for any other tooling. So a proper solution is still neccesary. It may feel like we're done here, but as I always say in cases like this: "a workaround only proves that a solution has not been found" 😀

[JesperHoff]

I have the same problem as thany - I can't upgrade to nextjs 12 due to the drive capitalization error. Running windows, and powershell.

I can do a workaround by running it in a WSL but then I lose hot-reloading for some reason, which greatly impacts by development speed. So for now, I have postponed the upgrade until it is fixed :(

[thany]

I care about this project. It's awesome. And what really cool is that we've drilled down to what the actual issue is: driveletter casing.

Now, as I annoyingly have asked many times before:

What's next?

I could create a bug to fix driveletter casing, but I'm sure it's just going to be closed again, no matter how much effort I put into describing the bug. So you understand why I'm really demotivated to do that. All the while, some of my very direct questions remain unanswered, despite the severity of this bug.

So again, what's next?? Who is going to solve this issue, when will that happen, which tests are going to be added to prevent regressions, and finally, evaluate how a critical issue like this was allowed to stretch on for such a long time.

[dvorakjt]

I suddenly started experiencing this too. In git bash, I navigated to the directory containing my project and started the dev server, and then immediately got this error message. I tried this with a clean install of the latest version (14.1.4), too, with the same result. But then I noticed something kind of silly: the case of the directory I navigated into in the terminal did not match the case of the directory expected by Next (as displayed in the error message). I navigated into the directory again, fixing the casing (changed desktop to Desktop) and it worked. 😅

[Evavic44]

In my case, my project was being run by pnpm in the C:/users directory instead of the package-lock.json file in my project. By simply deleting the pnpm-lock.yaml file, I stopped getting the error.

P.S: This was a clean install of nextjs 15.