Conditional Vite configuration fails with 'invalid JS' syntax

[wsw70]

To prepare my app to move from development to production, I wanted to use a conditional Vite configuration.

The basic configuration vite.config.ts below works fine, the app is correctly served and built:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

When changing the content of this file to export a function, the serve/build fails:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  // configuration common to serve and build stages
  const baseConfig = {
    plugins: [vue()],
  };
  // specific settings
  if (command === "serve") {
    return {
      ...baseConfig,
      define: {
        __BACK_WS_URI__: "ws://localhost:8080/ws",
        __BACK_HTTP_SPA__: "http://localhost:8080/spa",
      },
    };
  } else {
    return {
      ...baseConfig,
      define: {
        __BACK_WS_URI__: "XXX",
        __BACK_HTTP_SPA__: "YYY",
      },
    };
  }
});

The error is

15:20:12 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/client/env.mjs:4:0
  1  |  const context = (() => {
     |  ^
  2  |      if (typeof globalThis !== 'undefined') {
  3  |          return globalThis;
      at formatError (file:///C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/node/chunks/dep-YJaePtkC.js:63007:46)
      at TransformContext.error (file:///C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/node/chunks/dep-YJaePtkC.js:63001:19)     
      at TransformContext.transform (file:///C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/node/chunks/dep-YJaePtkC.js:61224:22) 
      at async Object.transform (file:///C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/node/chunks/dep-YJaePtkC.js:63302:30)     
      at async loadAndTransform (file:///C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/node/chunks/dep-YJaePtkC.js:49045:29)     
      at async viteTransformMiddleware (file:///C:/Users/yop/Perso/dev-perso/open-all-doors/code/app/front/node_modules/vite/dist/node/chunks/dep-YJaePtkC.js:58643:32)

What is wrong with this configuration?

Also asked on Stack Overflow

[RobinTail]

Having the same issue after using define in config.

[RobinTail]

@wsw70 , I found a way to fix it.
You need to add quotes, because define expects expressions, like this:

    define: {
        __BACK_WS_URI__: "'ws://localhost:8080/ws'",
        __BACK_HTTP_SPA__: "'http://localhost:8080/spa'",
      },