Use .env.client : The 'import.meta' meta-property is only allowed when the '--module' option is 'es2

K

kapa.ai•5/4/24, 1:43 PM

Hi @Estelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•5/4/24, 1:43 PM

----------------------
The error message you're seeing is related to TypeScript configuration. It seems that your TypeScript configuration file (

tsconfig.json

tsconfig.json

tsconfig.json

tsconfig.json) is not set to a module system that supports

import.meta

import.meta

import.meta

import.meta.

To use

import.meta

import.meta

import.meta

import.meta, you need to set the

--module

--module

--module

--module option in your

tsconfig.json

tsconfig.json

tsconfig.json

tsconfig.json file to 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

Here is an example of how you can do this:

{
  "compilerOptions": {
    "module": "es2020",
    // other options...
  }
}

{
  "compilerOptions": {
    "module": "es2020",
    // other options...
  }
}

{
  "compilerOptions": {
    "module": "es2020",
    // other options...
  }
}

{
  "compilerOptions": {
    "module": "es2020",
    // other options...
  }
}

Please note that this is a general TypeScript configuration issue and not specific to Wasp. In Wasp, you can use environment variables in both the client and the server code. For client-side, you should prefix your environment variables with

REACT_APP_

REACT_APP_

REACT_APP_

REACT_APP_ and you can access them using

import.meta.env.REACT_APP_YOUR_VAR_NAME

import.meta.env.REACT_APP_YOUR_VAR_NAME

import.meta.env.REACT_APP_YOUR_VAR_NAME

import.meta.env.REACT_APP_YOUR_VAR_NAME as stated in the Wasp documentation (https://wasp-lang.dev/docs/project/env-vars).

Remember, client environment variables are embedded into the client code during the build and shipping process, making them public and readable by anyone. Therefore, you should never store secrets in them (such as secret API keys).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•5/4/24, 1:43 PM

Sorry @Estelle, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

E

EstelleOP•5/4/24, 4:15 PM

please help, I can't use any env variables

M

miho•5/4/24, 7:39 PM

Oh yes, this is a known bug in the latest version

it will be fixed in the 0.14.0 release https://github.com/wasp-lang/wasp/issues/1989

You need to update the

tsconfig.json

tsconfig.json

tsconfig.json

tsconfig.json in the project root folder to include:

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

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

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

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

GitHub

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

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 curren...

E

EstelleOP•5/4/24, 8:07 PM

When I add this to my tsconfig.json, I have new errors :

Cannot find module 'wasp/client/operations'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

Cannot find module 'wasp/client/operations'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

Cannot find module 'wasp/client/operations'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

Cannot find module 'wasp/client/operations'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?ts(2792)

But when I do, I have a new error message :

Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.

Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.

Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.

Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.

E

EstelleOP•5/4/24, 8:10 PM

Do you know when you're gonna fix this?

M

miho•5/4/24, 8:12 PM

In the next 2 weeks hopefully

we have to investigate a bit and then fix it.

Could you use just some plain constant until then?

E

EstelleOP•5/4/24, 8:42 PM

Locally yes...
does it work well in production?

M

miho•5/5/24, 1:01 PM

Env vars on the client are public and therefore it's okay if you have them as some constants. https://wasp-lang.dev/docs/project/env-vars#client-env-vars

I'm sorry about the bug, we'll get it sorted quickly

Env Variables | Wasp

Environment variables are used to configure projects based on the context in which they run. This allows them to exhibit different behaviors in different environments, such as development, staging, or production.

E

EstelleOP•5/6/24, 7:34 AM

Yes indeed, thank you !

M

miho•5/6/24, 9:26 AM

@Estelle which Wasp version are you using? Check it with

wasp version

wasp version

wasp version

wasp version

M

miho•5/6/24, 12:19 PM

@Estelle could you try using this

tsconfig.json

tsconfig.json

tsconfig.json

tsconfig.json

// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    // We're bundling all code in the end so this is the most appropriate option,
    // it's also important for autocomplete to work properly.
    "moduleResolution": "bundler",
    // JSX support
    "jsx": "preserve",
    "strict": true,
    // Allow default imports.
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "typeRoots": [
      // This is needed to properly support Vitest testing with jest-dom matchers.
      // Types for jest-dom are not recognized automatically and Typescript complains
      // about missing types e.g. when using `toBeInTheDocument` and other matchers.
      "node_modules/@testing-library",
      // Specifying type roots overrides the default behavior of looking at the
      // node_modules/@types folder so we had to list it explicitly.
      // Source 1: https://www.typescriptlang.org/tsconfig#typeRoots 
      // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
      "node_modules/@types"
    ],
    // Since this TS config is used only for IDE support and not for
    // compilation, the following directory doesn't exist. We need to specify
    // it to prevent this error:
    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
    "outDir": ".wasp/phantom"
  }
}

// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    // We're bundling all code in the end so this is the most appropriate option,
    // it's also important for autocomplete to work properly.
    "moduleResolution": "bundler",
    // JSX support
    "jsx": "preserve",
    "strict": true,
    // Allow default imports.
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "typeRoots": [
      // This is needed to properly support Vitest testing with jest-dom matchers.
      // Types for jest-dom are not recognized automatically and Typescript complains
      // about missing types e.g. when using `toBeInTheDocument` and other matchers.
      "node_modules/@testing-library",
      // Specifying type roots overrides the default behavior of looking at the
      // node_modules/@types folder so we had to list it explicitly.
      // Source 1: https://www.typescriptlang.org/tsconfig#typeRoots 
      // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
      "node_modules/@types"
    ],
    // Since this TS config is used only for IDE support and not for
    // compilation, the following directory doesn't exist. We need to specify
    // it to prevent this error:
    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
    "outDir": ".wasp/phantom"
  }
}

// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    // We're bundling all code in the end so this is the most appropriate option,
    // it's also important for autocomplete to work properly.
    "moduleResolution": "bundler",
    // JSX support
    "jsx": "preserve",
    "strict": true,
    // Allow default imports.
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "typeRoots": [
      // This is needed to properly support Vitest testing with jest-dom matchers.
      // Types for jest-dom are not recognized automatically and Typescript complains
      // about missing types e.g. when using `toBeInTheDocument` and other matchers.
      "node_modules/@testing-library",
      // Specifying type roots overrides the default behavior of looking at the
      // node_modules/@types folder so we had to list it explicitly.
      // Source 1: https://www.typescriptlang.org/tsconfig#typeRoots 
      // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
      "node_modules/@types"
    ],
    // Since this TS config is used only for IDE support and not for
    // compilation, the following directory doesn't exist. We need to specify
    // it to prevent this error:
    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
    "outDir": ".wasp/phantom"
  }
}

// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    // We're bundling all code in the end so this is the most appropriate option,
    // it's also important for autocomplete to work properly.
    "moduleResolution": "bundler",
    // JSX support
    "jsx": "preserve",
    "strict": true,
    // Allow default imports.
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "typeRoots": [
      // This is needed to properly support Vitest testing with jest-dom matchers.
      // Types for jest-dom are not recognized automatically and Typescript complains
      // about missing types e.g. when using `toBeInTheDocument` and other matchers.
      "node_modules/@testing-library",
      // Specifying type roots overrides the default behavior of looking at the
      // node_modules/@types folder so we had to list it explicitly.
      // Source 1: https://www.typescriptlang.org/tsconfig#typeRoots 
      // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
      "node_modules/@types"
    ],
    // Since this TS config is used only for IDE support and not for
    // compilation, the following directory doesn't exist. We need to specify
    // it to prevent this error:
    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
    "outDir": ".wasp/phantom"
  }
}

This will become the new default in the next release, I just wanted to check if your issue would be fixed

E

EstelleOP•5/6/24, 12:19 PM

I am using wasp v0.12.1

I try right away your file

E

EstelleOP•5/6/24, 12:23 PM

It is working with your file thanks !!

M

miho•5/6/24, 12:24 PM

I'm glad to hear