Project build failed with "import.meta.env"

[WesleyXuZzz]

Describe the bug

Project build failed

Project build failed with "import.meta.env".If delete the code "import.meta.env", project will build success.

Reproduction

Repo: https://github.com/WesleyXuZzz/vue3-vite-ts-vant3

System Info

• required vite version: 2.2.2
• required Operating System: macos 11.3
• required Node version: 14.16.1

Optional:
Installed vue version (from yarn.lock or package-lock.json) ^3.0.5
Installed @vue/compiler-sfc version ^3.0.5

Logs (Optional if provided reproduction)

[rollup-plugin-dynamic-import-variables] Unexpected token (3:15)
vue3-vite-ts-vant3/src/utils/request.ts:3:15
error during build:
SyntaxError: Unexpected token (3:15)

[haoqunjiang]

Vite encountered the "import.meta.env" string, then tries to replace it with the whole stringified env object, which contains double-quotes. Therefore, that line of code is no longer valid JavaScript.

Related code:

vite/packages/vite/src/node/plugins/define.ts

Line 28 in 792a6e1

'import.meta.env': JSON.stringify(config.env),

vite/packages/vite/src/node/plugins/define.ts

Lines 40 to 49 in 792a6e1

	const pattern = new RegExp(
	'\\b(' +
	Object.keys(replacements)
	.map((str) => {
	return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
	})
	.join('|') +
	')\\b',
	'g'
	)

[WesleyXuZzz]

Vite encountered the "import.meta.env" string, then tries to replace it with the whole stringified env object, which contains double-quotes. Therefore, that line of code is no longer valid JavaScript.

Related code:

vite/packages/vite/src/node/plugins/define.ts

Line 28 in 792a6e1

'import.meta.env': JSON.stringify(config.env),

vite/packages/vite/src/node/plugins/define.ts

Lines 40 to 49 in 792a6e1

	const pattern = new RegExp(
	'\\b(' +
	Object.keys(replacements)
	.map((str) => {
	return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
	})
	.join('|') +
	')\\b',
	'g'
	)

Thanks，I solved the problem.

[haoqunjiang]

Glad it helped. But technically it's still a bug, so I need to reopen this issue.

[danawoodman]

Any chance a solution has been found for this? I'm noticing this with a SvelteKit + MDsveX site. It's essentially making it so I can't write any blog posts with the string import.meta.env 😅

pngwn/MDsveX#413

[bluwy]

The fix could probably be done together with #6295, but it's a hard bug to fix. Ideally if import.meta.env is used within a string, it should not be replaced, but cases like

const bla = `hmm ${import.meta.env}`

makes things a lot harder, unless we do a full parse in build.

[Qwertovsky]

Similar problem with process.env.NODE_ENV.

Reproduction:

1. Create new project with npm init vue. Answer all No.
2. Change App.vue template to

<template>
 <div>Hello process.env.NODE_ENV</div>
</template>

npm run build gives

[rollup-plugin-dynamic-import-variables] Unexpected token (3:73)
file: /media/disk/_work/Qwertovsky/vuetest/test/src/App.vue:3:73
error during build:
SyntaxError: Unexpected token (3:73)

npm run dev gives error in browser

Uncaught SyntaxError: missing ) after argument list[App.vue:18:65]

It points to the line with broken quotes

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, "Hello "development""))
}

[caicaishmily]

@WesleyXuZzz @sodatea Have you solved this problem? I got the same error message when I trying to build my react project.

[tony19]

@Qwertovsky Although very similar, this issue and yours have different causes. I reported your issue in #9829.

[privatenumber]

Instead of doing a string replace, can we leverage esbuild's define to only replace code?

Demo:
https://esbuild.github.io/try/#dAAwLjE4LjE0AC0tZGVmaW5lOnByb2Nlc3MuZW52Lk5PREVfRU5WPVwicHJvZHVjdGlvblwiAGNvbnN0IHN0cmluZyA9ICdwcm9jZXNzLmVudi5OT0RFX0VOVj0nICsgcHJvY2Vzcy5lbnYuTk9ERV9FTlY7