[SOLVED] - Why I still need to import react on each jsx/tsx file?

help
1

Since React 17 it’s not necessary to import React to use JSX, but even if I’m using React 18 I still need to import react, any thoughts?

2

Please follow the Manual Babel setup here: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

3

Hi @paulishca, I did try that approach but wasn’t work because meteor will ignore any custom config on @babel/preset-react as mentioned here meteor/babel-compiler.js at devel · meteor/meteor · GitHub

But I’ll give it another shot by using @babel/plugin-transform-react-jsx instead of @babel/preset-react since plugin-transform-react-jsx is not ignore it by meteor.

4

SOLVED by installing @babel/core @babel/plugin-transform-react-jsx and add custom .babelrc file with following lines

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

but I’m not sure if adding a custom babel config will not mess up anything else, please any idea?

1 Like
5

The solution for Meteor v3 and onwards can be found in How to NOT import React with 3.3.0? - react - Meteor Forum

Basically, just create the .swcrc file in root with the following content.

{
  "jsc": {
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

Meteor already has the speedy web compiler integrated, so it should work just fine with that.

3 Likes
6

It’s nice to note that you need to enable modern in your meteor config too!

Here is a preview of our docs: Modern Build Stack | Docs – it should help you get started!

1 Like