Wasp•8mo ago

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

I need to use env variables in my code and following the doc import.meta.env.REACT_APP_PUBLIC_STRIPE_PUBLIC_KEY get this error :

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.ts(1343)

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.ts(1343)

11 Replies

kapa.ai•8mo ago

Hi @Estelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you're seeing is related to TypeScript configuration. It seems that your TypeScript configuration file (tsconfig.json) is not set to a module system that supports import.meta. To use import.meta, you need to set the --module option in your 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...
  }
}

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_ and you can access them using 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 :speech_balloon: ---------------------- 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?

EstelleOP•8mo ago

please help, I can't use any env variables

miho•8mo ago

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 in the project root folder to include:

{
  "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...

EstelleOP•8mo ago

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)

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

Do you know when you're gonna fix this?

miho•8mo ago

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?

EstelleOP•8mo ago

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

miho•8mo ago

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.

EstelleOP•8mo ago

Yes indeed, thank you !

miho•8mo ago

@Estelle which Wasp version are you using? Check it with wasp version @Estelle could you try using this 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"
  }
}

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

EstelleOP•8mo ago

I am using wasp v0.12.1 I try right away your file It is working with your file thanks !!

miho•8mo ago

I'm glad to hear 🙂

Gaming

Programming

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