String 'import.meta.env' in Vue template breaks vite build #5086

Uninen · 2021-09-25T10:50:20Z

Describe the bug

After adding a new typed property to import.meta.env, adding the string import.meta.env breaks vite build. Dev server works normally, no TS errors.

$ vue-tsc --noEmit && vite build
vite v2.5.10 building for production...
✓ 5 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (8:69)
file: /Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/src/App.vue:8:69
error during build:
SyntaxError: Unexpected token (8:69)
    at Parser.pp$5.raise (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:19495:13)
    at Parser.pp.unexpected (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:16820:8)
    at Parser.pp.expect (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:16814:26)
    at Parser.pp$4.parseExprList (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:19362:12)
    at Parser.pp$4.parseSubscript (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18724:25)
    at Parser.pp$4.parseSubscripts (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18681:24)
    at Parser.pp$4.parseExprSubscripts (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18665:21)
    at Parser.pp$4.parseMaybeUnary (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18628:17)
    at Parser.pp$4.parseExprOps (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18561:19)
    at Parser.pp$4.parseMaybeConditional (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18544:19)
error Command failed with exit code 1.

Reproduction

Add typings for extended import.meta.env (Uninen/vite-importmetaenv-bug@23ad721)
Use import.meta.env.VITE_APP_FOO in script
Add string import.meta.env to template (Uninen/vite-importmetaenv-bug@d2e147c)
run vite build

Minimal reproduction here in the latest commit: https://github.com/Uninen/vite-importmetaenv-bug

(Clean vite template repo, first commit adds the code, second demonstrates the issue)

System Info

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 318.62 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.2 - ~/.nvm/versions/node/v16.6.2/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.20.3 - ~/.nvm/versions/node/v16.6.2/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 92.0
    Safari: 14.1.2
  npmPackages:
    @vitejs/plugin-vue: ^1.9.0 => 1.9.2 
    vite: ^2.5.10 => 2.5.10

Used Package Manager

yarn

Logs

$ vue-tsc --noEmit && vite build --debug
  vite:config bundled config file loaded in 275ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-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:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'asset-import-meta-url',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: 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     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  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   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/vite.config.ts',
  vite:config   configFileDependencies: [ 'package.json', '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     build: {}
  vite:config   },
  vite:config   root: '/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/public',
  vite:config   cacheDir: '/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: {
  vite:config     VITE_APP_VERSION: '0.0.0',
  vite:config     BASE_URL: '/',
  vite:config     MODE: 'production',
  vite:config     DEV: false,
  vite:config     PROD: true
  vite:config   },
  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     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +7ms
vite v2.5.10 building for production...
✓ 4 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (8:69)
file: /Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/src/App.vue:8:69
error during build:
SyntaxError: Unexpected token (8:69)
    at Parser.pp$5.raise (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:19495:13)
    at Parser.pp.unexpected (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:16820:8)
    at Parser.pp.expect (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:16814:26)
    at Parser.pp$4.parseExprList (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:19362:12)
    at Parser.pp$4.parseSubscript (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18724:25)
    at Parser.pp$4.parseSubscripts (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18681:24)
    at Parser.pp$4.parseExprSubscripts (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18665:21)
    at Parser.pp$4.parseMaybeUnary (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18628:17)
    at Parser.pp$4.parseExprOps (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18561:19)
    at Parser.pp$4.parseMaybeConditional (/Users/uninen/LocalDocuments/Code/tmp/metaenv-bug/node_modules/rollup/dist/shared/rollup.js:18544:19)
error Command failed with exit code 1.

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.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

vitejs/vite#5086

sarufarr · 2021-09-28T06:54:53Z

same in react tsx file
react@17.0.2,vite@2.5.10

IanVS · 2021-09-29T02:11:39Z

Possibly related: #2330

I'm seeing this error in react, svelte, and vue. (https://github.com/eirslett/storybook-builder-vite/pull/105/checks?check_run_id=3739457171)

Edit: I've realized this only happens when I use the strings in ways that I expect to remain strings, for example:

<div>import.meta.env</div>

Fails because it is being expanded into:

_jsx("div", {
  children: "{"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true}"
})

Whereas this is fine:

<div>{import.meta.env}</div>

IanVS · 2021-09-29T02:42:06Z

I think this might be a duplicate of #3304, in fact.

bluwy · 2022-02-05T09:50:11Z

Closing as duplicate of #3304

Uninen added the pending triage label Sep 25, 2021

Uninen changed the title ~~String 'import.meta.env' in template breaks vite build~~ String 'import.meta.env' in Vue template breaks vite build Sep 25, 2021

Uninen added a commit to Uninen/vite-ts-tailwind-starter that referenced this issue Sep 25, 2021

fix: workaround for possible Vite bug

2aee7b2

vitejs/vite#5086

sodatea added p3-minor-bug An edge case that only affects very specific usage (priority) and removed pending triage labels Sep 26, 2021

bluwy closed this as completed Feb 5, 2022

github-actions bot locked and limited conversation to collaborators Feb 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

String 'import.meta.env' in Vue template breaks vite build #5086

String 'import.meta.env' in Vue template breaks vite build #5086

Uninen commented Sep 25, 2021 •

edited

Loading

sarufarr commented Sep 28, 2021

IanVS commented Sep 29, 2021 •

edited

Loading

IanVS commented Sep 29, 2021

bluwy commented Feb 5, 2022

String 'import.meta.env' in Vue template breaks vite build #5086

String 'import.meta.env' in Vue template breaks vite build #5086

Comments

Uninen commented Sep 25, 2021 • edited Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

sarufarr commented Sep 28, 2021

IanVS commented Sep 29, 2021 • edited Loading

IanVS commented Sep 29, 2021

bluwy commented Feb 5, 2022

Uninen commented Sep 25, 2021 •

edited

Loading

IanVS commented Sep 29, 2021 •

edited

Loading