CODEWITHSUNDEEP
reactjstypescriptimagedynamicparceljs
yesenia
yesenia

Reputation: 523

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

I keep getting "The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'.ts(1343)" when trying to use import.meta.url (as shown in Parcel docs). Yes, I have configured my tsconfig as suggested in the message (tried all 3 options).

I'm trying to dynamically load images from an assets folder using React, Typescript and Parcel 2. I have scoured the internet searching for solutions and I've read about merging and augmenting types in Typescript, but I can't seem to make it work.

Upvotes: 52

Views: 62473

Answers (4)

KHB
KHB

Reputation: 654

a quick and dirty is to mock the variable in the jest files and avoid the import altogether:

jest.mock("~/config", () => ({ ENV_VARIABLE: "//MOCK_BASE_PATH/api/v0" }));

you may need to re-export the file from a ts file:

~/config.ts

export const ENV_VARIABLE = import.meta.env.VITE_ENV_VARIABLE

Upvotes: 0

Marc
Marc

Reputation: 5465

I noticed a case sensitivity issue when you instigate a project that generates a jsconfig.json and/or tsconfig.json for you.

The default config from source may have the value of target set to ESNext but in actual fact it should be esnext lower case.

As far as I can tell, module being set to ESNext (uppercase prefix) seems to be fine as the value for this config?

You may need to prod and poke at your IDE of choice until it picks up your config change.

The error went away for me after making the value of target all lowercase after I noticed all the suggested values where also lowercase.

Upvotes: 2

Baris Senyerli
Baris Senyerli

Reputation: 920

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    ...

Upvotes: 17

Michael Sorensen
Michael Sorensen

Reputation: 2124

If you are using VSCode and you have the module setting in typescript configuration set to 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'.

Then you might want to try simply restarting your typescript server. The quickest way would by hitting (ctrl+shift+p) and selecting restart typescript server. Picture attached.

restart typescript server

Upvotes: 48

Related Questions