The prop value with an expression type of `MetaProperty` could not be resolved

[quinnturner]

➜  yarn lint
The prop value with an expression type of MetaProperty could not be resolved. Please file an issue ( https://github.com/jsx-eslint/jsx-ast-utils/issues/new ) to get this fixed immediately.
The prop value with an expression type of MetaProperty could not be resolved. Please file an issue ( https://github.com/jsx-eslint/jsx-ast-utils/issues/new ) to get this fixed immediately.
The prop value with an expression type of MetaProperty could not be resolved. Please file an issue ( https://github.com/jsx-eslint/jsx-ast-utils/issues/new ) to get this fixed immediately.
The prop value with an expression type of MetaProperty could not be resolved. Please file an issue ( https://github.com/jsx-eslint/jsx-ast-utils/issues/new ) to get this fixed immediately.

{
  "extends": ["react-app", "react-app/jest", "prettier"]
}

"jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.2":
  version: 3.3.2
  resolution: "jsx-ast-utils@npm:3.3.2"
  dependencies:
    array-includes: ^3.1.5
    object.assign: ^4.1.2
  checksum: 61d4596d44480afc03ae0a7ebb272aa6603dc4c3645805dea0fc8d9f0693542cd0959f3ba7c0c9b16c13dd5a900c7c4310108bada273132a8355efe3fed22064
  languageName: node
  linkType: hard

"eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:^7.29.4":
  version: 7.30.1
  resolution: "eslint-plugin-react@npm:7.30.1"
  dependencies:
    array-includes: ^3.1.5
    array.prototype.flatmap: ^1.3.0
    doctrine: ^2.1.0
    estraverse: ^5.3.0
    jsx-ast-utils: ^2.4.1 || ^3.0.0
    minimatch: ^3.1.2
    object.entries: ^1.1.5
    object.fromentries: ^2.0.5
    object.hasown: ^1.1.1
    object.values: ^1.1.5
    prop-types: ^15.8.1
    resolve: ^2.0.0-next.3
    semver: ^6.3.0
    string.prototype.matchall: ^4.0.7
  peerDependencies:
    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
  checksum: 553fb9ece6beb7c14cf6f84670c786c8ac978c2918421994dcc4edd2385302022e5d5ac4a39fafdb35954e29cecddefed61758040c3c530cafcf651f674a9d51
  languageName: node
  linkType: hard

"eslint-plugin-jsx-a11y@npm:^6.5.1":
  version: 6.6.1
  resolution: "eslint-plugin-jsx-a11y@npm:6.6.1"
  dependencies:
    "@babel/runtime": ^7.18.9
    aria-query: ^4.2.2
    array-includes: ^3.1.5
    ast-types-flow: ^0.0.7
    axe-core: ^4.4.3
    axobject-query: ^2.2.0
    damerau-levenshtein: ^1.0.8
    emoji-regex: ^9.2.2
    has: ^1.0.3
    jsx-ast-utils: ^3.3.2
    language-tags: ^1.0.5
    minimatch: ^3.1.2
    semver: ^6.3.0
  peerDependencies:
    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
  checksum: baae7377f0e25a0cc9b34dc333a3dc6ead9ee8365e445451eff554c3ca267a0a6cb88127fe90395c578ab1b92cfed246aef7dc8d2b48b603389e10181799e144
  languageName: node
  linkType: hard

[ljharb]

Can you provide any JS code that leads to this? I'm not sure what a MetaProperty is.

[quinnturner]

I am not sure what MetaProperty is either, unfortunately. Nothing in our code base has that. If I had to make a wild guess, it may be related to MetaProperty in TypeScript? https://github.com/microsoft/TypeScript/search?q=metaproperty

[ljharb]

ahh maybe import.meta - do you have any usage of that?

[quinnturner]

Sorry for the late response. Yes, I have usages of import.meta. I use Vite, which uses import.meta.env.VITE_APP_* for environment variables.

[ljharb]

gotcha, thanks. I'll see if I can reproduce it in a test case. (weird tho, i'd expect process.env to be how env variables are used in a node module bundler)

[ljharb]

Hmm, tests are passing - make sure you're using the latest Babel parser?

[quinnturner]

I am pretty sure that I have the latest of babel everything, as I am quite diligent in updating dev dependencies (including transitive deps by performing partial refreshes of the lockfile). I saw this issue in the logs of the lint output today, so I somewhat doubt it's an issue with an old babel version (sorry if this isn't super helpful, just AFK right now!)

[ljharb]

no worries, more repro info would be helpful when you're back at a computer :-)

[robiot]

This error also occurred for me when using import.meta in a typescript project using vite. The eislint parser used is @typescript-eslint/parser and ecmaVersion is set to 2021.

[mark-meyer]

I was also bumping into this warning. In my case this results in the message:

<a href={import.meta.env.BASE_URL}>

Changing it to:

<a href={`${import.meta.env.BASE_URL}`}>

makes it go away.

[ljharb]

@mark-meyer thanks, that's helpful!

[ljharb]

@mark-meyer actually we already have this example in tests, which are passing. what version of jsx-ast-utils and the babel parser are you using?

[joaofmartinho]

Bump, having this issue with Vite, running version 3.3.3

[ljharb]

@joaofmartinho same thing, a repro case would be helpful.

[robintown]

This warning is appearing in a project I'm working on due to the following TSX code snippet:

<LogoType
  width={80}
  height={11}
  aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
/>

jsx-ast-utils is at 3.3.5, and @babel/parser is at either 7.23.0 or 7.22.16 (not sure, there are apparently two versions floating around in my node_modules)

Sorry that I don't have the time to turn this into a more minimal reproduction case right now, but you should be at least able to reproduce by cloning this repository, then running yarn install and yarn run lint:eslint. Here's the import.meta usage in question

[receter]

Changing it to:

<a href={`${import.meta.env.BASE_URL}`}>

makes it go away.

I came here from a Google search, same issue in another project. I will create a minimal repo to reproduce an link it here.

[receter]

Here is a repo to reproduce this issue: https://github.com/receter/meta-property-could-not-be-resolved

The key is that I have replaced the eslint config with just:

module.exports = {
  "extends": ["react-app"],
}

With the original config provided by vite, this does not happen.

My other project was created with Vite 4.2.0 and eslint was added later on manually.

For me the fix will likely be to change my eslint config to what is recommended by Vite.

[joaofmartinho]

In my case the warning is coming from the package jsx-eslint/eslint-plugin-jsx-a11y that has jsx-ast-utils as a dependency.

[ljharb]

@joaofmartinho thanks, that's a good workaround - it should really be fixed here tho.

[joaofmartinho]

I commented on this issue almost a year ago but overlooked the solution. Now that I found the solution by myself by figuring out that it was the eslint-plugin-jsx-a11y throwing the error, I came back and saw that someone already suggested that above my first comment - it has more emojis now so it's more noticeable, also added some to raise awareness for the "cause" of the warnings.