Open alvarlagerlof opened 2 years ago
Hey there 👋
The project you provided is empty. Can you please provide more information and update the linked project?
I must have removed it. Updated to a working link now.
Oops, pressed the wrong button. Sorry for that.
I am also wondering whether npm is always default even when there is a yarn.lock
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.
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.
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.
I have reported the issue to the Next.js team.
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.
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
.
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 👍 .
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).
I think we have to remove the StackBlits links for now https://github.com/mui/material-ui/pull/39079.
@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
? 🤔
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.
@oliviertassinari I'll keep you posted on this. Think we can get this resolved soon!
@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.
@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?
@SamVerschueren Great, thanks
@SamVerschueren My scoreboarder/website repo boots now, but I am getting errors like this in the console.
"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
.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.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.
@SamVerschueren Maybe it's a caching issue?
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.
The fix has been deployed and the .babelrc
is not present anymore when opening something like the material-ui-nextjs example.
@SamVerschueren Amazing, now the link in https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts just works. Thanks
Describe the bug
Link to the blitz that caused the error
https://stackblitz.com/edit/nextjs-umrqtt?file=package.json
Steps to reproduce
Expected behavior
Dev dev server starts as expecred.
Parity with Local
Screenshots
Platform
Additional context
None