Current template `tsconfig.json` breaks `import.meta.env` in the client app

[Mihovil Ilakovac]

Users will get an error in their IDE when trying to use env variables defined in the .env.client. The way they use those variables is by writing import.meta.env.REACT_APP_SOMETHING. With our current tsconfig.json set up, this will be underlined as an error.

This was reported by Vinny here: https://ptb.discord.com/channels/686873244791210014/1229414936967381062

Reproduction

Creating a new project:

.
├── main.wasp
├── package.json
├── public
├── src
│   ├── Main.css
│   ├── MainPage.jsx
│   ├── vite-env.d.ts
│   └── waspLogo.png
├── tsconfig.json
└── vite.config.ts

which has then has the following tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "typeRoots": [
      "node_modules/@testing-library",
      "node_modules/@types"
    ],
    "outDir": ".wasp/phantom"
  }
}

results in the following error when using import.meta.env.*:

Possible fix

Vinny reported that adding this to the project root tsconfig.json helped:

{
  "compilerOptions": {
+  "module": "ES2022"
  }
}

[Filip Sodić]

Important

Before applying any fix, we should figure out how we broke this since it's a regression.

[Mihovil Ilakovac]

Reported by users in Discord: https://discord.com/channels/686873244791210014/1236312259874127903/1236312259874127903