Failed to Compile

[JonTron1987]

I get an error when running npm dev run. I have posted the image of what it is saying instead of typing it out. I follow the instructions per the NEXT.js website. What do I need to do to fix this error?

[mroandersons]

Same here. Did you find solution?

[JonTron1987]

no...currently searching...but so far no luck On Saturday, April 9, 2022, 11:02:11 AM EDT, mroandersons ***@***.***> wrote: Same here. Did you find solution? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Grimnir09]

Ditto.

@JonTron1987 @mroandersons
Have you tried npm install --save styled-jsx?

[JonTron1987]

Hm..let me try that. Will see what happens and follow up.

[JonTron1987]

yeah, for some reason I am not getting that issue with a default template build; it was just the one from the Next.js site example that had the error. Quite interesting.

[BradleyCulley]

yeah, for some reason I am not getting that issue with a default template build; it was just the one from the Next.js site example that had the error. Quite interesting.

I just wrote a fix for that and created a pull request with the fix: #75

[huozhi]

@BradleyCulley the styled-jsx is supported out of box in next.js, adding duplicated styled-jsx will lead to more issues.

@JonTron1987 Could you share more about how to create the starter? The commands you run, and the package manager version you're using.

And could you also share the result of running npm ls styled-jsx under your project? Thanks

[BradleyCulley]

@BradleyCulley the styled-jsx is supported out of box in next.js, adding duplicated styled-jsx will lead to more issues.

@JonTron1987 Could you share more about how to create the starter? The commands you run, and the package manager version you're using.

And could you also share the result of running npm ls styled-jsx under your project? Thanks

@huozhi Thank you for your reply. I made a short narrated video demonstrating the reproducible sequence for this issue, doing that step of the tutorial freshly, in an empty directory. I thought that would be an efficient way to demonstrate it. This is the video: https://vimeo.com/704367470.

[huozhi]

@BradleyCulley I cannot repro the case by running the command..

Can you share more info that your environment and your app? I need to know:

• package manager version
• next version it installed
• create-next-app version npx create-next-app --version
• the output result of npm ls styled-jsx when you encounter the issue

This is my result

➜  starter-nextjs-blog git:(main) npm -v
8.3.2
➜  starter-nextjs-blog git:(main) npx create-next-app --version
12.1.5
➜  starter-nextjs-blog git:(main) npm ls styled-jsx
starter-nextjs-blog@ /Users/huozhi/workspace/tests/nextjs/starter-nextjs-blog
└─┬ next@12.1.5
  └── styled-jsx@5.0.1

The styled-jsx should be installed at node_modules/styled-jsx/ so that next could locate it. I suspect it could be sth wrong with npm or create-next-app that didn't let you install styled-jsx properly then it lead to this issue.

I also run with create-react-app@latest or create-react-app@canary to get the npx installed CRN is update to date. Please let us know if it also works for you

[BradleyCulley]

@huozhi Thank you for your reply. I ran through those items in another narrated video, here: https://vimeo.com/704698185. Perhaps I'm missing something in your recommendations, or my node/npm version is incompatible. For reference, I've been doing React professionally since 2016, and frontend software engineering for 13 years: https://www.linkedin.com/in/brad-culley-93651992/. So I'm new to Next, but not React/npm/etc. I may be missing something obvious though.

[huozhi]

@BradleyCulley Thaks for the feedback, Sorry for the confusion for not explaining the reason clearly of asking for those system info.
I asked for those information because we had some problem with previous npm versions like (7.20.x - 8.1.0) that sometimes installed styled-jsx incorrectly.
And I asked for version of CRN because npx might cache the previous verisons that didn't use the latest one which might have bugs that are already been fixed.
The command npm ls styled-jsx could be helpful for checking if you might installed duplicated styled-jsx.

The suspectious one is the npm version, would you mind upgrading npm to any version above 8.1.0 to see if it still existed?

[huozhi]

I can stablely repro locally with npm@8.1.0 now that styled-jsx isn't installed under <project dir>/node_modules but <project dir>/next/node_modules which breaks the node module resolving with styled-jsx.

After bumping to npm versions above 8.1.0 the issue is gone for me

[BradleyCulley]

@huozhi That works! Thank you Jiachi. This is a short video showing it working: https://vimeo.com/704712718. I installed latest Node LTS and got npm 8.5.5 with it.

Would it be worth adding to the docs that one's npm version must be greater than 8.1.0? It may be there already, but I missed it.

[nipunn1313]

I too ran into this issue. Bumping to NPM 8 solved.
I was previously on

➜ npm --version
7.24.2

The failure mode this hits when you're accidentally on an old version of NPM is pretty hard to figure out - especially since this is the tutorial brand new folks are pointed to https://nextjs.org/learn/basics/create-nextjs-app. It's probably unreasonable to expect brand new folks to debug NPM versions.

Fixed by bumping to

➜ npm --version
8.8.0