ESLint error message encountered on MetaProperty

[edmaala]

I'm currently reviewing React Typescript with Vite. My React version is 18.2.0 and ESLint version 8.2.0.

I've been checking on ways to open a link on a new tab with a button. and found the following to be a valid way of nesting elements to do so:

function LinkNewTab() {
  return (
    <a target='_blank' rel='noreferrer' href={import.meta.env.VITE_URL}>
      <div>
        <button>Text</button>
      </div>
    </a>
  );
}

export default LinkNewTab;

The output was working as expected, but running the linter in my terminal returns the following message:

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 error message no longer shows up when I modified my approach to simply trigger window.open upon clicking the button and removing the wrapping anchor and div tags.

function LinkNewTab() {
  return (
     <button onClick={() => window.open(import.meta.env.VITE_URL, '_blank')}>Text</button>
  );
}

export default LinkNewTab;

[ljharb]

Be advised this isn't a good UX - things that navigate should only be links and should look like links. Also, the default type of button is submit, so you definitely want an explicit type="button".

That said, "MetaProperty" refers to import.meta and that's not present in your code sample. Are you sure that's the correct sample?

[edmaala]

Oh. I was actually importing the href from a .env file. I'll be updating the sample then.

[ljharb]

ok, then this duplicates #133 (but with much more info, thanks!) and #119.

However, we already have import.meta in our tests, which are passing. Can you perhaps make a repro case, with a repo or a codesandbox?

[edmaala]

Here it is https://codesandbox.io/p/sandbox/meta-property-repro-ml864q?file=%2Ftsconfig.json%3A19%2C38

Here's a screenshot as well.

I've also noticed that the error does not show up in the sandbox when I only had the basic Vite and ESLint setup. It only reappeared after I added airbnb and prettier as additional dev dependencies.

[edmaala]

Hi @ljharb . Would just like to know if this has already been resolved. Should I close the issue?

[ljharb]

It hasn't been, and no, the issue should stay open until it is.

[ljharb]

@joaofmartinho you can click "unsubscribe" on the right hand side of any github issue.