[env] env file working properly, But build reported an error.

[zhougonglai]

Describe the bug:
Use env files
.env

VITE_SVELTEKIT_FILEPATH=https://image.xx.com
VITE_SVELTEKIT_API_PATH=https://api.xxxx.com

working properly in dev。
but on build throw error.

Stack trace

vite v2.2.4 building SSR bundle for production...
✓ 8 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (6:247)
file: xxxxx
> Unexpected token (6:247)
SyntaxError: Unexpected token (6:247)

the file

<script> await fetch(
`${
import.meta.env.VITE_SVELTEKIT_API_PATH
}/api/news?${new URLSearchParams({
class_type: 2,
support_type: 1
})}`
).then(res => res.json());
</script>

[JBusillo]

See my next message....

I took a brief look at this. You can reproduce the build error just by adding a ".env" file in the demo project root directory, containing:

VITE_SVELTEKIT_FILEPATH=https://image.xx.com
VITE_SVELTEKIT_API_PATH=https://api.xxxx.com

Somehow the environment variable 'VITE_SVELTEKIT_API_PATH' is being used someplace within the SvelteKit build code. The VITE_SVELTEKIT_FILEPATH variable is dealt with properly.

When I change the environment variable to something else, e.g., VITE_SVELTEKITTEN_API_PATH or VITE_SVELTEKIT_APIPATH, the build is successful.

I cannot find the definition or usage of the environment variable within the SvelteKit code. But, at least @zhougonglai has a workaround he can use.

[zhougonglai]

in here:
repo

use npm run build
error in here
error and here

@benmccann

[JBusillo]

OK. I found where the error message is coming from. The code is being parsed by @rollup/plugin-dynamic-import-vars, but the incoming code is already invalid. I captured the code that is being presented: https://github.com/JBusillo/Miscellaneous/blob/main/debug/before-dynamic-import-vars.js

I placed the following in my source code to test:
console.log(import.meta.env.VITE_SVELTEKITTEN_API_PATH);

If you look at the const css = { statement, inside the map property, you'll see that the replaced console.log parameter doesn't have escaped quotes, which causes the parsing to error out, failing the build.

My inkling is that the environment variable substitution is happening after whichever transform adds the const css = { statement.

This is as far as I got, but hopefully it gives someone a hint as to where the problem is. I can research this later, but the roosters are starting to crow, and I need some sleep.

[JBusillo]

OK -- I looked into this a little more.

SvelteKit invokes two builds, one for the client and one for the server, in module kit/src/core/build/index.js. The server build fails due to the internal vite plugin "vite/src/node/plugins/define.ts". It indiscriminately replaces all occurrences of the environment eye-catcher with the desired environment variable, including those within the source map. This causes the parse error as mentioned in my previous post.

UPDATE: There is an open issue in Vite which addresses this: #vitejs/vite#3304
I leave it to the SvelteKit collaborators to determine if this should be classified as a Vite bug or a SvelteKit bug (or neither). In any event, it might be nice if Vite would ensure that the Javascript is valid after the transformation within "define.ts", such that errors of this kind would be easier to trace -- possibly displaying the affected code or persisting it to an error log. It is somewhat difficult to track down these errors, as code is passed from plugin to plugin, performing various transformations. There is no persisted evidence of the transformations when there is a failure.

I've cloned the repo that @zhougonglai created, with a workaround. I created a separate .js file (src/lib/environmentVariables.js) that exports the environment variables. I then replaced all direct references to the variables (e.g., import.meta.env.VITE_SVELTEKIT_API_PATH and import.meta.env.VITE_SVELTEKIT_FILEPATH) to use the exported values -- in this case, envApiPath and envFilePath.

The modified repo is at https://github.com/JBusillo/svelte-cms

Let me know if there's anything further I can do.

[benmccann]

We filed vitejs/vite#3176 as our preferred solution on the server-side

[zhougonglai]

OK -- I looked into this a little more.

SvelteKit invokes two builds, one for the client and one for the server, in module kit/src/core/build/index.js. The server build fails due to the internal vite plugin "vite/src/node/plugins/define.ts". It indiscriminately replaces all occurrences of the environment eye-catcher with the desired environment variable, including those within the source map. This causes the parse error as mentioned in my previous post.

UPDATE: There is an open issue in Vite which addresses this: #vitejs/vite#3304
I leave it to the SvelteKit collaborators to determine if this should be classified as a Vite bug or a SvelteKit bug (or neither). In any event, it might be nice if Vite would ensure that the Javascript is valid after the transformation within "define.ts", such that errors of this kind would be easier to trace -- possibly displaying the affected code or persisting it to an error log. It is somewhat difficult to track down these errors, as code is passed from plugin to plugin, performing various transformations. There is no persisted evidence of the transformations when there is a failure.

I've cloned the repo that @zhougonglai created, with a workaround. I created a separate .js file (src/lib/environmentVariables.js) that exports the environment variables. I then replaced all direct references to the variables (e.g., import.meta.env.VITE_SVELTEKIT_API_PATH and import.meta.env.VITE_SVELTEKIT_FILEPATH) to use the exported values -- in this case, envApiPath and envFilePath.

The modified repo is at https://github.com/JBusillo/svelte-cms

Let me know if there's anything further I can do.

Thank you for your enthusiasm.🙏

im use js variable replace them

export const file = 'https://image.xx.com/';
export const path = 'https://webapi.xxx.com';

[benmccann]

Closing as duplicate of #720