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

Question

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.

Mohave

In order for us to help you, you'll need to provide a Minimal, Reproducible Example (including your TSConfig). – Lichter

Does the error come from parcel (through @parcel/validator-typescript), VSCode, or tsc? Also, how is your project structured? I have a tsconfig.json file in your project with "compilerOptions": { "module": "es2020" }" set, and using import.meta.url works for me - one idea is that maybe whatever tool is throwing the error for you isn't finding your tsconfig.json file? – Luxuriance

@milahu that question was asked after this questions so technically isnt that question a duplicate of this one? – Absorptance

Answer 1

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.

Absorptance

This also happens when using Volar to handle typescript. Volar: Restart Vue server resolved the issue for me. – Unsearchable

Answer 2

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

Tasiatasiana

"The special ESNext value refers to the highest version your version of TypeScript supports. This setting should be used with caution, since it doesn’t mean the same thing between different TypeScript versions and can make upgrades less predictable." typescriptlang.org/tsconfig#target – Fortier

This fixes the error for import.meta, but causes imports to break. Adding "moduleResolution": "node" to your snippet fixed it for me, although I don't really know what I'm doing. import { createRoot } from 'react-dom/client'; => Cannot find module 'react-dom/client'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? – Rectangular

Answer 3

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.

Scissure