Next.js cannot start dev or build

[alvarlagerlof]

Describe the bug

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/projects/node-jcedu5/.env
warn  - The `target` config is deprecated and will be removed in a future version.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
info  - Attempted to load @next/swc-linux-x64-gnu, but an error occurred: Cannot load native addon because loading addons is disabled.
info  - Attempted to load @next/swc-linux-x64-gnux32, but it was not installed
info  - Attempted to load @next/swc-linux-x64-musl, but an error occurred: Cannot load native addon because loading addons is disabled.
error - Failed to load SWC binary for linux/x64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

Link to the blitz that caused the error

https://stackblitz.com/edit/nextjs-umrqtt?file=package.json

Steps to reproduce

1. clone https://github.com/scoreboarder/website
2. yarn
3. yarn build

Expected behavior

Dev dev server starts as expecred.

Parity with Local

• [X] I have run the project in my local machine and I could not reproduce the issue.

Screenshots

Platform

Browser name  = Chrome
Full version  = 100.0.4896.60
Major version = 100
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 109105557,
  "usedJSHeapSize": 100987429,
  "jsHeapSizeLimit": 4294705152
}
Hash = 31afbfcfe1b0985e8cbdb27d44e16766166a118e

Additional context

None

[d3lm]

Hey there 👋

The project you provided is empty. Can you please provide more information and update the linked project?

[alvarlagerlof]

I must have removed it. Updated to a working link now.

[alvarlagerlof]

Oops, pressed the wrong button. Sorry for that.

I am also wondering whether npm is always default even when there is a yarn.lock

[d3lm]

Yes, our package manager (turbo) resolves a yarn.lock to a package-lock.json, so for your WebContainer projects it's best to have a package-lock.json to avoid resolution every time you load the project.

And it also looks like Next.js doesn't include swc-wasm anymore. I don't know why though. Maybe you can find out and ask upstream, but it looks like it's no longer a dependency of Next.js.

[alvarlagerlof]

I see. Your default Next.js project seems to get around this by including a .babelrc. I tried adding that to my project, and it does build and run perfectly fine then, with yarn too.

I see now https://nextjs.org/docs/messages/failed-loading-swc was linked in error, suggesting that too.

So it seems like there's something about the web container that is incompatible for now. I can't debug that myself easily right now since I am unfamiliar with web containers. It would be nice to hear if a fix is planned, considering more SWC is planned for Next.js in the future.

[d3lm]

I think you can also fix this by adding the swc-wasm to your project manually. You don't need to add a babel config.

So it seems like there's something about the web container that is incompatible for now.

I am not sure I understand. What do you think is incompatible here? It all comes down to using the WASM version of SWC which they load when loading the native versions fails.

However, there seems to be an issue with the @next/swc-wasm-web which can't be imported, even on local. The problem seems to be the package.json which uses module which is not something that Node.js supports and they have settled on package exports. So for this to work correctly, @next/swc-wasm-web has to be fixed upstream. Basically it has to be the following:

"type": "module",
"main": "wasm.js",

or alternatively without the type field which then requires a .mjs extension.

[d3lm]

I have reported the issue to the Next.js team.

[alvarlagerlof]

I think you can also fix this by adding the swc-wasm to your project manually. You don't need to add a babel config.

I looked up swc-wasm on npm and only found @swc/wasm. Think I might have worngly assumed that was a different thing, or they changed names,

Sorry for my confusion on this. I looks like you have it all handled though.

[d3lm]

Ok, so apparently the @next/swc-wasm-web is not meant to be consumed with Node. There's also @next/swc-wasm-nodejs which you have to install if you want to use SWC. However, it gives other errors then. Maybe you can try on local and see if it works using @next/swc-wasm-nodejs.

[SamVerschueren]

Hey @alvarlagerlof. I'm looking into this issue again, and it looks like the repository you linked now (kinda) works. If I open https://stackblitz.com/~/github.com/scoreboarder/website, then I get some output. However, there's still an issue on our side as it throws

error - TypeError: Value at index 0 does not have a transferable type.
    at _0x1fac4d.postMessage (https://website-pvkm.w-credentialless.staticblitz.com/blitz.d4a32cb71496f1cb7595ed7c8471aaa3b79d22fc.js:15:83947)

I'll create an internal ticket and link this issue 👍 .

[oliviertassinari]

Related to this problem, when I open https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts,SstackBlitz adds a .babelrc file automatically. This is strange.

This seems unnecessary. It forces to use Babel over SWC which breaks the use of @next/font (which relies on SWC).

[oliviertassinari]

I think we have to remove the StackBlits links for now https://github.com/mui/material-ui/pull/39079.

[SamVerschueren]

@oliviertassinari We made some fixes internally. It seems to work now if you remove the .babelrc file. Can you test it again?

https://stackblitz.com/edit/github-tpvrv1

[EDIT] Oh wait, do we add that .babelrc? 🤔

[SamVerschueren]

Ok, apparently we do add that .babelrc because it was needed for older Next.js projects. I'm figuring that out right now as I think we can actually remove it.

[SamVerschueren]

@oliviertassinari I'll keep you posted on this. Think we can get this resolved soon!

[SamVerschueren]

@oliviertassinari We fixed the issue with the .babelrc. We don't add that file automatically for all Next.js 13 (or later) projects. It's possible though that for some imports it's still cached on our side (for 1 day). But I was able to succesfully import 1 of the projects you linked to in your PR. https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs?file=README.md. I think this means all material-ui projects should now work. But it's possible that you need to wait 1 day for the other links so the cache gets cleared.

[SamVerschueren]

@oliviertassinari I think I cleared the cache for all your examples. So everything should be working as expected. If not, let us know!

@alvarlagerlof I tested your scorer website again and it sees to work now. There is still something that fails, but that might be a CORS issue. Can you give it another try?

[oliviertassinari]

@SamVerschueren Great, thanks

[alvarlagerlof]

@SamVerschueren My scoreboarder/website repo boots now, but I am getting errors like this in the console.

[oliviertassinari]

1. Using "next": "14.0.5-canary.60" fixes the Failed to load SWC binary issue, proof https://stackblitz.com/edit/github-z45nfe?file=package.json. But we have to wait for Next.js to make a new stable release. They didn't release for over 5 weeks 🙈

https://github.com/vercel/next.js/releases/tag/v14.0.4

2. But StackBlitz still seems to add the .babelrc file that breaks with @next/font. You can reproduce the bug with this link https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts. No, this file isn't in the source https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts.

[SamVerschueren]

But StackBlitz still seems to add the .babelrc file

I actually thought we stopped doing that. Unless the configured version is 12.x. I'll have a quick look.

[oliviertassinari]

@SamVerschueren Maybe it's a caching issue?

[SamVerschueren]

I don't know why I didn't look into this issue 3 weeks ago. Maybe I got distracted, so thanks for pinging me again 🙏 .

I identified the issue and created an internal PR to fix this. I'll keep you posted when we deployed this to production.

[SamVerschueren]

The fix has been deployed and the .babelrc is not present anymore when opening something like the material-ui-nextjs example.

[oliviertassinari]

@SamVerschueren Amazing, now the link in https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts just works. Thanks