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?

[sodatea]

Yes. And I think that’s the problem. esbuild follows the symbolic link and returns the weird relative path string.

[TTSKarlsson]

I encountered this problem today too in a folder junction pointing from J:\dev\js\sec to H:\dev\js\sec.

It works when running the dev server / building from terminal when in H:, but not when in the junction folder on J:.

Other apps are sensitive to their launch parameters paths (vscode for example) so it would be nice if vite worked together with vscode in these circumstances. Symbolic links are not that uncommon after all.