Unhandled exceptions from wyw-in-js crashes Next.js

[yoohahn]

Steps to reproduce

1. Use un-existing properties on the theme object OR At the end of your file just type any random string
2. Save the file
3. Kaboom

Current behavior

Crashes the dev server and it needs to restart

Expected behavior

Log error or show the Error dialog in browser.

Context

When we try to access properties on undefined the wyw-in-js transformation crashes and leaves nextjs in a hanging state. Only way to recover from it is to fix the error and restart the dev-server.

What is happening is that the parsing of the css crashes. It looks like we just assumes that the key exists and never handle that wyw-in-js throws an error here.

Wrapping build in a try catch solves it. But not sure that this is the place we should fix it.

See here for a working example.

Also found another related issues while i accidentally smashed my keyboard and saved my component. It just crashes and never recovers from the crashed state. Look here for an example.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.0
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.1.1 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Edge: 129.0.2792.79
    Safari: 18.0

Search keywords: wyw-in-js, css