Failed to Compile about next-learn HOT 20 CLOSED

Ditto.

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

from next-learn.

The module resolving improvement is landed in next 12.0.6 or upgrading npm (> 8.1.0) can also fix this issue

from next-learn.

Same here. Did you find solution?

from next-learn.

from next-learn.

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

from next-learn.

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.

from next-learn.

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

from next-learn.

@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

from next-learn.

@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.

from next-learn.

@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
└─┬ [email protected]
  └── [email protected]

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

from next-learn.

@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.

from next-learn.

@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?

from next-learn.

I can stablely repro locally with [email protected] 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

from next-learn.

@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.

from next-learn.

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

from next-learn.

@nipunn1313 Agreed it's a bit of a pitfall of the tutorial. @huozhi would it be worth adding to the tutorial that one's npm version must be greater than 8.1.0?

from next-learn.

We improved the support of styled-jsx in next.js for pnpm/yarnPnP in [email protected], ideally the create-next-app@canary could solve the issue as well, also works with npm 8.1.0.

Could you also try the command with canary tag to see if the problem is gone? If it works then we could close the issue and pr.

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

# edit package.json to "next": "latest" to "next": "canary"

# then run install
npm install

It will also go out with the next stable version so the we can leave the doc as it rn

from next-learn.

We improved the support of styled-jsx in next.js for pnpm/yarnPnP in [email protected], ideally the create-next-app@canary could solve the issue as well, also works with npm 8.1.0.

Could you also try the command with canary tag to see if the problem is gone? If it works then we could close the issue and pr.

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

It will also go out with the next stable version so the we can leave the doc as it rn

@huozhi Hi Jiachi - I just ran the command with the canary version, and get the same error. Here is a video demonstrating that: https://vimeo.com/705192965

from next-learn.

hey @BradleyCulley thanks for the repro, and sorry I was missing 1 step, which is:

# edit package.json to "next": "latest" to "next": "canary"

# then run install
npm install

Added to previous comment

The CRN will always install the latest version of next. If you switch to canary version it works. Make sure you clean the package-lock.json and node_modules before the re-installation!

from next-learn.

hey @BradleyCulley thanks for the repro, and sorry I was missing 1 step, which is:

# edit package.json to "next": "latest" to "next": "canary"

# then run install
npm install

Added to previous comment

The CRN will always install the latest version of next. If you switch to canary version it works. Make sure you clean the package-lock.json and node_modules before the re-installation!

Hi @huozhi - that works great. That sounds like a good resolution of the issue: it'll be fixed once the current canary build gets promoted to latest.

from next-learn.