[examples] Next.js examples don't run on StackBlitz

[MZHoffman]

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts?file=README.md

Current behavior 😯

npm install && npx next dev
warn preInstall No description field
warn preInstall No repository field
warn preInstall No license field
┌ [1/4] 🔍 Resolving dependencies
└ Completed in 1.047s
┌ [2/4] 🚚 Fetching dependencies
│ info pruneDeps Excluding 8 dependencies. For more information use --verbose.
└ Completed in 1.821s
┌ [3/4] 🔗 Linking dependencies
└ Completed in 1.954s

success Saved lockfile "package-lock.json"
success Updated "package.json"

success Install finished in 4.941s
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info - Using external babel configuration from /home/projects/vbwiovlzx.github/.babelrc
error - ./src/theme.js:1:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
wait - compiling / (client and server)...
error - ./src/theme.js:1:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
wait - compiling /_error (client and server)...
error - ./src/theme.js:1:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[oliviertassinari]

It also appears that the StackBlitz demo includes a .babelrc that isn't in the other versions. That seems to be the source of the problem, and I'm not sure why it's only present on StackBlitz

@samuelsycamore Independently from this issue (I have only seen it now) I reported this problem in stackblitz/webcontainer-core#659 (comment). StackBlitz fixed that rogue .babelrc bug.

But it looks like it still doesn't work. When I try to start
https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts?file=README.md
it fails with the same error as the GitHub issue stackblitz/webcontainer-core#659:

---

It feels like we must merge #39079. This is a poor DX for developers right now, we provide links that don't work, e.g.

https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts

We have CodeSandbox, it works, there isn't much we can do about StackBlitz.

[samuelsycamore]

@oliviertassinari agreed, let's remove it.

[oliviertassinari]

It's getting a bit better stackblitz/webcontainer-core#659 (comment), but still same outcome, doesn't work outside of the box.

[oliviertassinari]

The problem was solved, the link works now: stackblitz/webcontainer-core#659 (comment). For example https://stackblitz.com/edit/github-qzvs9d?file=package.json.