Regression: from 2.0.0-beta.58 to 2.0.0-beta.59 importing changed and is now not working for phoenix.js

[mindreframer]

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)

Describe the bug

When importing the JS library for Phoenix (Elixir) there is an error

phx-app.js:13 Uncaught TypeError: Cannot read property 'Socket' of undefined
    at phx-app.js:13

after upgrading from 2.0.0-beta.58 to 2.0.0-beta.59. It works with 2.0.0-beta.58.

So something here caused this:
v2.0.0-beta.58...v2.0.0-beta.59

Reproduction

https://github.com/mindreframer/repro-brocken-phx-import

// in assets/src/vendor/phx-app.js
import { Socket } from "phoenix";

System Info

• vite version: 2.0.0-beta.58 / 2.0.0-beta.59
• Operating System: MacOSX
• Node version: v12.18.2
• Package manager (npm/yarn/pnpm) and version: yarn / 1.22.10

Logs (Optional if provided reproduction)

Logs dont show any errors, still providing them:

  vite:config bundled config file loaded in 109ms +0ms
  vite:config using resolved config: {
  vite:config   esbuild: { jsxFactory: 'h', jsxFragment: 'Fragment' },
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'prefresh',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: {},
  vite:config   optimizeDeps: { exclude: [ '@prefresh/vite/runtime', '@prefresh/vite/utils' ] },
  vite:config   configFile: '/Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/vite.config.ts',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets',
  vite:config   base: '/',
  vite:config   publicDir: '/Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/public',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   optimizeCacheDir: '/Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/.vite',
  vite:config   alias: [ { find: /^\/@vite\//, replacement: [Function: replacement] } ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +4ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  ⚡Vite dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.4:3000/

  ready in 289ms.

  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 19ms  /index.html +0ms
  vite:spa-fallback Rewriting GET / to /index.html +96ms
  vite:time 2ms   /index.html +81ms
  vite:resolve 1ms   /@vite/client -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/vite/dist/client/client.js +0ms
  vite:resolve 0ms   /src/main.tsx -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/main.tsx +2ms
  vite:load 1ms   [fs] /src/main.tsx +0ms
  vite:load 9ms   [fs] /@vite/client +7ms
  vite:transform 5ms   /@vite/client +0ms
  vite:time 19ms  /@vite/client +202ms
  vite:resolve 0ms   ./vendor/phx-app.css -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/vendor/phx-app.css +256ms
  vite:resolve 0ms   /src/vendor/phx-app.css -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/vendor/phx-app.css +1ms
  vite:resolve 0ms   ./vendor/phx-app.js -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/vendor/phx-app.js +0ms
  vite:resolve 0ms   /src/vendor/phx-app.js -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/vendor/phx-app.js +1ms
  vite:resolve 0ms   preact -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/.vite/preact.js?v=ada9ec16 +0ms
  vite:resolve 0ms   /node_modules/.vite/preact.js?v=ada9ec16 -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/.vite/preact.js?v=ada9ec16 +0ms
  vite:resolve 0ms   ./app -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/app.tsx +1ms
  vite:resolve 0ms   /src/app.tsx -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/app.tsx +0ms
  vite:resolve 0ms   ./index.css -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/index.css +0ms
  vite:resolve 0ms   /src/index.css -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/index.css +0ms
  vite:transform 257ms /src/main.tsx +246ms
  vite:time 261ms /src/main.tsx +245ms
  vite:load 3ms   [fs] /src/vendor/phx-app.css +287ms
  vite:load 4ms   [fs] /src/vendor/phx-app.js +2ms
  vite:resolve 0ms   phoenix -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/.vite/phoenix.js?v=ada9ec16&es-interop +43ms
  vite:resolve 0ms   /node_modules/.vite/phoenix.js?v=ada9ec16&es-interop -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/.vite/phoenix.js?v=ada9ec16&es-interop +0ms
  vite:resolve 0ms   /node_modules/.vite/phoenix.js?v=ada9ec16 -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/.vite/phoenix.js?v=ada9ec16 +4ms
  vite:transform 9ms   /src/vendor/phx-app.js +46ms
  vite:time 14ms  /src/vendor/phx-app.js +46ms
  vite:load 13ms  [fs] /src/app.tsx +10ms
  vite:load 12ms  [fs] /src/index.css +0ms
  vite:resolve 3ms   @prefresh/vite/runtime -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/@prefresh/vite/runtime/index.mjs?v=ada9ec16 +23ms
  vite:resolve 0ms   /node_modules/@prefresh/vite/runtime/index.mjs?v=ada9ec16 -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/@prefresh/vite/runtime/index.mjs?v=ada9ec16 +0ms
  vite:resolve 0ms   @prefresh/vite/utils -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/@prefresh/vite/utils/index.mjs?v=ada9ec16 +1ms
  vite:resolve 0ms   /node_modules/@prefresh/vite/utils/index.mjs?v=ada9ec16 -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/@prefresh/vite/utils/index.mjs?v=ada9ec16 +0ms
  vite:resolve 0ms   ./logo -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/logo.tsx +0ms
  vite:resolve 0ms   /src/logo.tsx -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/src/logo.tsx +1ms
  vite:hmr [self-accepts] src/app.tsx +0ms
  vite:transform 32ms  /src/app.tsx +33ms
  vite:time 45ms  /src/app.tsx +33ms
  vite:resolve 0ms   ../../node_modules/nprogress/nprogress.css -> /Users/roman/Desktop/jsbundlers/repro-brocken-phx-import/assets/node_modules/nprogress/nprogress.css +0ms
  vite:hmr [self-accepts] src/index.css +47ms
  vite:transform 70ms  /src/index.css +39ms
  vite:time 84ms  /src/index.css +39ms
  vite:hmr [self-accepts] src/vendor/phx-app.css +13ms
  vite:transform 95ms  /src/vendor/phx-app.css +13ms
  vite:time 100ms /src/vendor/phx-app.css +13ms
  vite:load 15ms  [fs] /src/logo.tsx +85ms
  vite:hmr [self-accepts] src/logo.tsx +18ms
  vite:transform 23ms  /src/logo.tsx +24ms
  vite:time 40ms  /src/logo.tsx +25ms
  vite:spa-fallback Rewriting GET / to /index.html +1s
  vite:time 2ms   /index.html +574ms
  vite:spa-fallback Rewriting GET / to /index.html +16ms
  vite:time 0ms   /index.html +15ms
  vite:cache [304] /@vite/client +0ms
  vite:time 1ms   /@vite/client +44ms
  vite:cache [304] /src/main.tsx +1ms
  vite:time 0ms   /src/main.tsx +1ms
  vite:cache [304] /src/vendor/phx-app.css +164ms
  vite:time 0ms   /src/vendor/phx-app.css +165ms
  vite:cache [304] /src/vendor/phx-app.js +1ms
  vite:time 1ms   /src/vendor/phx-app.js +1ms
  vite:cache [304] /src/app.tsx +10ms
  vite:time 1ms   /src/app.tsx +9ms
  vite:cache [304] /src/index.css +3ms
  vite:time 0ms   /src/index.css +3ms
  vite:cache [304] /src/logo.tsx +11ms
  vite:time 1ms   /src/logo.tsx +11ms

[yyx990803]

It's kinda interesting because Phoenix ships a mangled + minified cjs dist file that dynamically assigns exports, when it in fact has a clean ESM source file shipped as well. Opened a PR: phoenixframework/phoenix#4191

[mindreframer]

@yyx990803 Awesome, thanks for the super-quick fix!