Writing React(JSX) without needing to import React

[hornta]

Since React introduced the new JSX transform right before React 17 importing React is not needed anymore when writing react components(JSX). Is it something that can be added to snowpack or maybe the snowpack react template? I'm relatively new to snowpack but this was the first thing I clearly noticed when started to use Snowpack.

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

[phaux]

It can be configured but the setup is non-trivial.

// snowpack.config.json
{
  "plugins": [
    "@snowpack/plugin-react-refresh", 
    "@snowpack/plugin-babel" // 👈 have to add babel here
  ],
  // ...
}

// babel.config.json
{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }], // 👈 this is important
    ["@babel/preset-env", { "targets": { "esmodules": true }, "bugfixes": true, "modules": false }]
  ]
}

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx", // 👈 for correct type checking
    // ...
  }
}

# deps
npm install @snowpack/plugin-babel @babel/preset-{env,react,typescript} typescript@beta

[artecoop]

@phaux Thanks for your explanation and example. In order to complete your exceptional answer, I had to update the install section of snowpack config as

// snowpack.config.json
{
  "install": [
    "react/jsx-runtime"
    // ...
  ],
  // ...
}

[sebarti]

In snowpack 3.x this is now

// ...
packageOptions: {
  knownEntrypoints: [
     'react/jsx-runtime'
     // ...
  ],
  // ...
},

[hornta]

Doesn't work :( I'm getting ReferenceError: React is not defined using snowpack ^3.3.7

[joshmeads]

I'm getting

Uncaught SyntaxError: The requested module '../../../_snowpack/pkg/react/jsx-runtime' does not provide an export named 'jsx'

with the above setup. Have seemingly tried everything but I'm not yet sure if this is a Snowpack issue or Yarn PnP issue.

Update: Turning off remote module resolution fixed the issue. packageOptions.source: 'local'

[wanglam]

It seems like a issue about esbuild If you don't want to use @snowpack/plugin-babel.

[evanw]

It seems like a issue about esbuild If you don't want to use @snowpack/plugin-babel.

Support for the new JSX transform is independent of writing JSX without needing to import React. Not importing React in JSX with esbuild is already supported.

You can do this using the inject feature, which is a general way of auto-importing any variable with esbuild. This is documented under "Auto-import for JSX" here: https://esbuild.github.io/api/#inject.

I'm not sure how to pass this to esbuild using Snowpack since I don't use Snowpack myself. Just wanted to point out that esbuild can already do auto-importing.

[evanw]

As I known the jsx function put the children in the second parameter as part of props. In the old createElement function, the children is the third parameter. Is there someway to figure out this?

Support for the new JSX transform is independent of writing JSX without needing to import React. The new JSX transform is not supported in esbuild (that's the esbuild issue you linked to). Not importing React in JSX with esbuild is already supported via inject. I commented here about inject because it seemed to address the original need of "Writing React(JSX) without needing to import React". Doing that has nothing to do with the new JSX transform.

If you want to use the new JSX transform, you can run another transformer on the JSX code that supports the new JSX transform, either instead of or in addition to esbuild's transformer.

[FredKSchott]

Bah, I didn't realize that they changed the arguments for the new JSX pragma function. Thats... annoying.

[stolinski]

I would love the ability to use inject in Snowpack. From what I'm seeing here that isn't supported?

[FredKSchott]

As Evan said, we should split the "automatic inject" and "new JSX transform" into two independent feature requests. We can still tackle automatic injection. If anyone is interested in creating a PR please let me know and I can spin up a prioritized issue where we can discuss desired behavior.

[thealjey]

@FredKSchott what is the conclusion on this, if I may ask?

[t49tran]

Hi everyone, what is the latest state of this issue ? Snowpack document doesn't mention it and I am not sure how Snowpack works with React jsx-runtime ? Is there a way to achieve it at the moment without using babel ?

[evanw]

"Writing React(JSX) without needing to import React" is already possible with esbuild: https://esbuild.github.io/content-types/#auto-import-for-jsx.

[hornta]

Ah I should've checked the above discussion.

@t49tran I can see some work has been done based on this discussion https://github.com/snowpackjs/snowpack/pull/1838/files but I doubt it's enough because of #1681 (reply in thread)

[t49tran]

@evanw, it's good to know about that, however, that document still mentions React.createElement, which is the old JSX transformation, not the new React 17 jsx-runtime. From a coding / developer experience point of view, these things achieve the same thing (do not have to import React on every single component), but they are also quite different.

This is because the JSX transform turns JSX syntax into a call to React.createElement but it does not itself import anything, so the React variable is not automatically present.

[evanw]

Yes, I'm aware. See earlier in this thread: #1681 (reply in thread). I'm just pointing out that for people who want to be "Writing React(JSX) without needing to import React" (the title of this discussion), esbuild can already do that. You do not need to use the React 17 transform to be able to do that.

[j2is]

To sum up, Snowpack has built in support for JSX