Configuration / env file for react with vite not working

[mrtnbrst]

I can't figure out how to make .env files or alternatively configuration defined in project.json to work together with react and vite.

I checked the documentation (https://nx.dev/recipes/react/use-environment-variables-in-react#environment-variable-conflict-between-nx-and-vite) and the github issue #14528 .

I tried out those variations of the commands I found on the internet and the documentation.

nx run test-app:build  --skip-nx-cache --configuration=production --mode=production --verbose

nx run test-app:build  --skip-nx-cache --configuration=production --mode=production

nx run test-app:build  --skip-nx-cache -c=production

nx run test-app:build --envFile=<absolute-path-to-.env.production>

I tried out using the nx project root as CWD and the test-app directory as CWD - did not change the result.

The project.json that I used when trying to use the project.json for the configuration as recommended in the documentation page:

{
  "name": "test-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/test-app/src",
  "projectType": "application",
  "tags": [],
  "// targets": "to see all targets run: nx show project test-app --web",
  "targets": {},
  "configurations": {
    "development": {
      "VITE_BASE_PATH": "development-path"
    },
    "production": {
      "mode": "production",
      "VITE_BASE_PATH": "production-path"
    },
    "staging": {
      "mode": "staging"
    },
    "my-other-mode": {
      "mode": "my-other-mode"
    }
  }
}

I created the vite project with npx create-nx-workspace@latest with the react and vite option.

.env file:
VITE_BASE_PATH="7166development"

.env.production file:
VITE_BASE_PATH="dogfood"

The documentation mentions:
You can then use these variables in your application code like so: import.meta.env.VITE_CUSTOM_VAR.

I am using
const basePath = import.meta.env.VITE_BASE_PATH; console.log('!!!!!!'); console.log(basePath);.
The compiled code though never uses the production env, but always the regular .env file - it didn't use the configuration in the project.json either.

What am I doing wrong / what's the issue?

Node version: v19.7.0

nx.json (unchanged, as created by create-nx-workspace command):

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "defaultBase": "master",
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/eslint.config.js",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/src/test-setup.[jt]s",
      "!{projectRoot}/test-setup.[jt]s"
    ],
    "sharedGlobals": []
  },
  "plugins": [
    {
      "plugin": "@nx/vite/plugin",
      "options": {
        "buildTargetName": "build",
        "testTargetName": "test",
        "serveTargetName": "serve",
        "previewTargetName": "preview",
        "serveStaticTargetName": "serve-static"
      }
    },
    {
      "plugin": "@nx/eslint/plugin",
      "options": {
        "targetName": "lint"
      }
    },
    {
      "plugin": "@nx/jest/plugin",
      "options": {
        "targetName": "test"
      }
    }
  ],
  "generators": {
    "@nx/react": {
      "application": {
        "babel": true,
        "style": "css",
        "linter": "eslint",
        "bundler": "vite"
      },
      "component": {
        "style": "css"
      },
      "library": {
        "style": "css",
        "linter": "eslint"
      }
    }
  }
}