Build Error: [rollup-plugin-dynamic-import-variables] Unexpected token

[HenryWong-fe]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• 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.

Describe the bug

can no build this project

Reproduction

https://github.com/HenryWong-fe/vite-project

System Info

• vite version: ^2.0.0
• Operating System: mac os 10.15.4
• Node version: v14.15.1
• Package manager (npm/yarn/pnpm) and version: npm 6.14.8

Logs (Optional if provided reproduction)

[softboy99]

Hi,
I encounter 'unknown variable dynamic import' error when build for production. However, it is ok when dev env. Is there any configuration needed for dynamic import? There are little about this in the doc

[HenryWong-fe]

There are too few error messages to locate accurately。I found a related bug in issue, but it has been fixed,It's not clear what caused the build error。

[mdhelaluddin-ctg-bd]

Hi,
I encounter 'unknown variable dynamic import' error when build for production. However, it is ok when dev env. Is there any configuration needed for dynamic import? There are little about this in the doc

Did you solve this issue?

[softboy99]

Hi,
I encounter 'unknown variable dynamic import' error when build for production. However, it is ok when dev env. Is there any configuration needed for dynamic import? There are little about this in the doc

Did you solve this issue?

Hi,
add "@rollup/plugin-dynamic-import-vars" to your devdependencies and configure it in your vite.config.js, fix it.

vite.config:

build: {
rollupOptions: {
plugins: [
dynamicImportVars()
],
},
},

[mdhelaluddin-ctg-bd]

Hi,
I encounter 'unknown variable dynamic import' error when build for production. However, it is ok when dev env. Is there any configuration needed for dynamic import? There are little about this in the doc

Did you solve this issue?

Hi,
add "@rollup/plugin-dynamic-import-vars" to your devdependencies and configure it in your vite.config.js, fix it.

vite.config:

build: {
rollupOptions: {
plugins: [
dynamicImportVars()
],
},
},

Added in vite config file as you have suggested but no luck when deployed to the server. It's giving the same error! I have attached both code and error. Please check and suggest if possible. Thanks

[patak-dev]

@rollup/plugin-dynamic-import-vars is already included in Vite. The repro is too big to test a particular issue and it is currently outdated. Please open a new issue with a minimal reproduction against the latest Vite version if you still have a problem.

[stefanvanherwijnen]

This is possibly caused because you did not load the vue plugin in vite:
https://github.com/vitejs/vite/tree/main/packages/plugin-vue

My guess is that without it the SFC is not parsed correctly and top level imports are wrongly handled as dynamic imports, thus causing the error. Loading the plugin fixed the problem for me.

[xinyao27]

I ran into the same problem, but the difference is that I ran the react app.

[nukefusion]

This can also happen if you are using Typescript and building with "vue-tsc --noEmit && vite build" but you've somehow managed to emit a JS copy of vite.config.ts to disk. Check for vite.config.js, delete and rerun.

[CocaColf]

Hi,
I encounter 'unknown variable dynamic import' error when build for production. However, it is ok when dev env. Is there any configuration needed for dynamic import? There are little about this in the doc

Did you solve this issue?

Hi,
add "@rollup/plugin-dynamic-import-vars" to your devdependencies and configure it in your vite.config.js, fix it.
vite.config:
build: {
rollupOptions: {
plugins: [
dynamicImportVars()
],
},
},

Added in vite config file as you have suggested but no luck when deployed to the server. It's giving the same error! I have attached both code and error. Please check and suggest if possible. Thanks

Hi,I have the same error and the suggestions above doesn't work for me. Did you fixed it?

[DhvanilPatel]

I'm facing the same issue too while running npm run build

[LauJon]

I'm facing the same issue too while running npm run build

[callmeberzerker]

Same issue - has anyone found a solution?

It happens when I upgrade from vite@2.2.1 -> vite@2.3.4

[robertvansteen]

I'm facing this issue as well.

const page = await import(`./pages/${name}.tsx`);

Files that are directly in the pages directly are included, but nested ones e.g. pages/user/profile.tsx are not.

Edit: this seems a limitation of rollup-plugin-dynamic-import-variables as mentioned in the readme.

[BirkhoffLee]

Same here on latest Vite while running npm run build.

[nstuyvesant]

If you happen to be running into this with Svelte, a workaround was suggested here. I was getting build errors on .svelte pages that have a style tag and use an environmental variable via import.meta.env.

[collinsuzebu]

For me, I mistakenly named my file .js instead of .jsx. It was kind enough to tell me the file causing the error.

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.