The prop value with an expression type of `MetaProperty` could not be resolved about jsx-ast-utils HOT 20 OPEN

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.

from jsx-ast-utils.

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.

from jsx-ast-utils.

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.

from jsx-ast-utils.

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

from jsx-ast-utils.

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

from jsx-ast-utils.

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

from jsx-ast-utils.

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

from jsx-ast-utils.

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.

from jsx-ast-utils.

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)

from jsx-ast-utils.

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

from jsx-ast-utils.

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!)

from jsx-ast-utils.

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

from jsx-ast-utils.

@mark-meyer thanks, that's helpful!

from jsx-ast-utils.

@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?

from jsx-ast-utils.

Bump, having this issue with Vite, running version 3.3.3

from jsx-ast-utils.

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

from jsx-ast-utils.

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

from jsx-ast-utils.

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.

from jsx-ast-utils.

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

from jsx-ast-utils.

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.

from jsx-ast-utils.