Loading unprepared module: npm:react

[oscarotero]

I have the following configuration:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:react"
  }
}

And this code:

const TabButton = (tab) => {
  const props = { className: tab };

  return (
    <button {...props} key={tab}>
      {tab}
    </button>
  )
}

When I run it, I get the following error:

error: Loading unprepared module: npm:react, imported from: file:///Users/oscarotero/www/jsx/main.jsx

If I change the order of the properties (key first) it works fine:

const TabButton = (tab) => {
  const props = { className: tab };

  return (
    <button key={tab} {...props}>
      {tab}
    </button>
  )
}

It works fine also with other properties names that are not key:

const TabButton = (tab) => {
  const props = { className: tab };

  return (
    <button {...props} foo={tab}>
      {tab}
    </button>
  )
}

or after removing the object destructuring:

const TabButton = (tab) => {
  return (
    <button className={tab} key={tab}>
      {tab}
    </button>
  )
}

In summary, JSX seems to fail if there's a destructuring assignment syntax before the key property. A very weird error.

[dsherret]

I opened https://github.com/swc-project/swc/issues/8215

[codesculpture]

I opened https://github.com/swc-project/swc/issues/8215

It was closed and that says it was intentional and why?

[dsherret]

@codesculpture apparently this is an unfortunate scenario in react-jsx where it will do the old transform in addition to the new one https://github.com/swc-project/swc/issues/8215#issuecomment-1792911872

We'll have to handle it in Deno.

[dsherret]

Opened https://github.com/swc-project/swc/issues/8230 -- going to work on this there.

[bartlomieju]

@dsherret can this issue be closed now?

[codesculpture]

Its not related to here technically, but also not solved yet.

[dsherret]

@bartlomieju no, the issue in swc is still open.