vite: Import error in the browser and blank page in some templates (subst)

Describe the bug

When I scaffold a new Vue or Preact project with create-vite@631a9bf, and then run npm run dev (after installing the dependencies), I get the Uncaught SyntaxError: import not found: default in Firefox, and a blank page.

I can reproduce this with CJS and ESM (without and with TypeScript). But also with create-vite@2.5.1, except that you have to remember to add "type": "module" in the package.json, or transform the imports and exports in vite.config.js into CJS. I can also reproduce this bug with Edge: Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=620176f5' does not provide an export named 'default' (same error).

I specify that the normal and TypeScript versions of React, Svelte templates work correctly.

Nevertheless, the problem seems to disappear, when the project is built: vite build && vite preview, the template works, there are no errors, and the page is not blank (for Vue & Preact).

Vue template (blank page & error)

Preact template (blank page & error)

(With preact() -> preact.default(), because it doesn’t work without.)

Lit Element template (error)

Refs: https://github.com/vitejs/vite/pull/4293#issuecomment-881956605

Reproduction

https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-vue https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-vue-ts https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-preact https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-preact-ts https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-lit-element https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-lit-element-ts

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-2410M CPU @ 2.30GHz
    Memory: 4.13 GB / 7.94 GB
  Binaries:
    Node: 16.5.0 - ~\AppData\Local\Volta\tools\image\node\16.5.0\node.EXE
    Yarn: 1.22.10 - ~\AppData\Local\Volta\tools\image\yarn\1.22.10\bin\yarn.CMD
    npm: 7.19.1 - ~\AppData\Local\Volta\tools\image\node\16.5.0\npm.CMD
  Browsers:
    ~~Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)~~
    Firefox Developer (91.0b3)
  npmPackages:
    @vitejs/plugin-vue: ^1.2.5 => 1.2.5
    vite: ^2.4.2 => 2.4.2

Used Package Manager

npm

Logs

With Vue template:

vite:config native esm config loaded in 304ms URL {
  href: 'file:///C:/Users/me/workspace/vite-experiments/vue/vite.config.js',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/C:/Users/me/workspace/vite-experiments/vue/vite.config.js',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:config using resolved config: {
  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     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'C:/Users/me/workspace/vite-experiments/vue/vite.config.js',
  vite:config   configFileDependencies: [],
  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: { fs: [Object] }
  vite:config   },
  vite:config   root: 'C:/Users/me/workspace/vite-experiments/vue',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: 'C:\\Users\\me\\workspace\\vite-experiments\\vue\\public',
  vite:config   cacheDir: 'C:\\Users\\me\\workspace\\vite-experiments\\vue\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  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     dynamicImportVarsOptions: { warnOnError: true, exclude: [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     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  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     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +19ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.4.2 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 753ms.

  vite:time 2ms   / +0ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 37ms  /index.html +110ms
  vite:resolve 5ms   /Users/Original ME/workspace/vite-experiments/vue/node_modules/vite/dist/client/client -> C:/Users/Original ME/workspace/vite-experiments/vue/node_modules/vite/dist/client/client.mjs +0ms
  vite:resolve 8ms   /@vite/client -> C:/Users/Original ME/workspace/vite-experiments/vue/node_modules/vite/dist/client/client.mjs +1ms
  vite:resolve 2ms   /src/main.js -> C:/Users/me/workspace/vite-experiments/vue/src/main.js +18ms
  vite:load 12ms  [fs] /@vite/client +0ms
  vite:resolve 2ms   ./env -> C:/Users/Original ME/workspace/vite-experiments/vue/node_modules/vite/dist/client/env.mjs +37ms
  vite:transform 27ms  /@vite/client +0ms
  vite:time 73ms  /@vite/client +146ms
  vite:load 42ms  [fs] /src/main.js +41ms
  vite:resolve 0ms   vue -> C:/Users/me/workspace/vite-experiments/vue/node_modules/.vite/vue.js?v=756ed77f&es-interop +16ms
  vite:resolve 1ms   /node_modules/.vite/vue.js?v=756ed77f&es-interop -> C:/Users/me/workspace/vite-experiments/vue/node_modules/.vite/vue.js?v=756ed77f&es-interop +3ms
  vite:resolve 1ms   ./App.vue -> C:/Users/me/workspace/vite-experiments/vue/src/App.vue +20ms
  vite:resolve 1ms   /src/App.vue -> C:/Users/me/workspace/vite-experiments/vue/src/App.vue +1ms
  vite:resolve 0ms   /node_modules/.vite/vue.js?v=756ed77f -> C:/Users/me/workspace/vite-experiments/vue/node_modules/.vite/vue.js?v=756ed77f +1ms
  vite:transform 32ms  /src/main.js +36ms
  vite:time 82ms  /src/main.js +35ms
  vite:load 3ms   [fs] ..\..\..\..\Original ME\workspace\vite-experiments\vue\node_modules\vite\dist\client\env.mjs +48ms
  vite:rewrite 0ms   [no imports] C:/Users/Original ME/workspace/vite-experiments/vue/node_modules/vite/dist/client/env.mjs +0ms
  vite:transform 2ms   ..\..\..\..\Original ME\workspace\vite-experiments\vue\node_modules\vite\dist\client\env.mjs +19ms
  vite:time 16ms  ..\..\..\..\Original ME\workspace\vite-experiments\vue\node_modules\vite\dist\client\env.mjs +23ms
  vite:load 7ms   [fs] /node_modules/.vite/vue.js?v=756ed77f +34ms
  vite:rewrite 5ms   [no imports] node_modules\.vite\vue.js?v=756ed77f +50ms
  vite:transform 6ms   /node_modules/.vite/vue.js?v=756ed77f +49ms
  vite:time 38ms  /node_modules/.vite/vue.js?v=756ed77f +47ms
  vite:load 27ms  [fs] /src/App.vue +24ms
[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

  vite:resolve 1ms   ./components/HelloWorld.vue -> C:/Users/me/workspace/vite-experiments/vue/src/components/HelloWorld.vue +168ms
  vite:resolve 1ms   /src/components/HelloWorld.vue -> C:/Users/me/workspace/vite-experiments/vue/src/components/HelloWorld.vue +1ms
  vite:resolve 1ms   /src/App.vue?vue&type=style&index=0&lang.css -> C:/Users/me/workspace/vite-experiments/vue/src/App.vue?vue&type=style&index=0&lang.css +7ms
  vite:hmr [self-accepts] src\App.vue +0ms
  vite:transform 102ms /src/App.vue +110ms
  vite:time 136ms /src/App.vue +108ms
  vite:load 0ms   [plugin] /src/App.vue?vue&type=style&index=0&lang.css +145ms
  vite:load 14ms  [fs] /src/components/HelloWorld.vue +11ms
[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

  vite:resolve 1ms   /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css -> C:/Users/me/workspace/vite-experiments/vue/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css +133ms
  vite:hmr [self-accepts] src\components\HelloWorld.vue +132ms
  vite:transform 81ms  /src/components/HelloWorld.vue +132ms
  vite:time 101ms /src/components/HelloWorld.vue +132ms
  vite:hmr [self-accepts] src\App.vue?vue&type=style&index=0&lang.css +37ms
  vite:transform 127ms /src/App.vue?vue&type=style&index=0&lang.css +35ms
  vite:time 131ms /src/App.vue?vue&type=style&index=0&lang.css +35ms
  vite:load 0ms   [plugin] /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css +123ms
  vite:hmr [self-accepts] src\components\HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css +22ms
  vite:transform 15ms  /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css +23ms
  vite:time 21ms  /src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css +23ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Edit: sorry for all the edits, but GitHub strangely removes some changes on a new edit (cf. edit history).

I take the opportunity to ask a question: is it normal that vite build in the Lit Element template, generates only dist/X.es.js?