31

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.

Greg Venech
  • 8,062
  • 2
  • 19
  • 29
yesenia
  • 311
  • 1
  • 3
  • 3
  • In order for us to help you, you'll need to provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) (including your TSConfig). – jsejcksn Oct 26 '21 at 01:21
  • 2
    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? – Andrew Stegmaier Oct 26 '21 at 14:27
  • @milahu that question was asked after this questions so technically isnt that question a duplicate of this one? – Michael Sorensen Mar 17 '23 at 16:28

3 Answers3

24

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

Michael Sorensen
  • 1,850
  • 12
  • 20
  • 4
    This also happens when using Volar to handle typescript. `Volar: Restart Vue server` resolved the issue for me. – Guy Passy Apr 27 '22 at 08:16
10
// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    ...
Baris Senyerli
  • 642
  • 7
  • 13
  • 1
    "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." https://www.typescriptlang.org/tsconfig#target – Guy Sep 19 '22 at 06:17
  • 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? – Timoffex Mar 05 '23 at 01:14
0

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.

Marc
  • 5,109
  • 2
  • 32
  • 41