SSR importing xstate with ssr.noExternal causes SyntaxError: Unexpected token '.'

[GrygrFlzr]

Describe the bug

When evaluating xstate as an SSR module while it's defined in ssr.noExternal, Vite fails to evaluate the module.

vite.createServer({
  ssr: {
    noExternal: ['xstate']
  },
  // ...
})

It seems to be failing here in Vite:

vite/packages/vite/src/node/ssr/ssrModuleLoader.ts

Lines 121 to 130 in 6fae0b7

	try {
	new Function(
	`global`,
	ssrModuleExportsKey,
	ssrImportMetaKey,
	ssrImportKey,
	ssrDynamicImportKey,
	ssrExportAllKey,
	result.code + `\n//# sourceURL=${mod.url}`
	)(

When evaluating this file, this section:

catch (error) {
  reportUnhandledExceptionOnInvocation(errorData, error, id);

...produces this invalid JS:

catch (__vite_ssr_import_6__.error) {
  __vite_ssr_import_2__.reportUnhandledExceptionOnInvocation(errorData, __vite_ssr_import_6__.error, id);

Vite is incorrectly substituting the local error variable with an SSR import variable.

Reproduction

https://github.com/GrygrFlzr/vite-xstate

git clone https://github.com/GrygrFlzr/vite-xstate.git
cd vite-xstate
npm i
npm run dev

Visit http://localhost:3000 to receive:

$ npm run dev

> vite-xstate@1.0.0 dev C:\Users\GrygrFlzr\Documents\projects\vite-xstate
> node server

1:02:24 PM [vite] new dependencies found: xstate, updating...
1:02:24 PM [vite] ✨ dependencies updated, reloading page...
1:02:24 PM [vite] Error when evaluating SSR module /node_modules/xstate/es/interpreter.js:
SyntaxError: Unexpected token '.'
    at new Function (<anonymous>)
    at instantiateModule (C:\Users\GrygrFlzr\Documents\projects\vite-xstate\node_modules\vite\dist\node\chunks\dep-efe32886.js:68893:9)
SyntaxError: Unexpected token '.'
    at new Function (<anonymous>)
    at instantiateModule (C:\Users\GrygrFlzr\Documents\projects\vite-xstate\node_modules\vite\dist\node\chunks\dep-efe32886.js:68893:9)

System Info

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 14.69 GB / 31.95 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.6.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.54)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.1.2 => 2.1.2

Used package manager: npm 7.6.1

Also tested against the current main branch 6fae0b7.

[bwaidelich]

FYI: probably a dirty hack but I managed to work around this limitation by doing

import { ... } from 'xstate/dist/xstate.web';

(instead of ... from 'xstate';)

[leemove]

#2966