React is not defined after migrating to React 17

help
1

Hello,

I migrated to React v17.
I know that now it is not necessary to import React from 'react'; so I deleted it but the console shows me Uncaught ReferenceError: React is not defined

Tried creating a babel.config.js file with the following code but is not working.

module.exports = {
  presets: [
    '@babel/preset-env', 
    ['@babel/preset-react', { 
      runtime: 'automatic',
    }],
  ],
  plugins: [
    '@loadable/babel-plugin',
    ['@babel/plugin-transform-runtime',
      {
        regenerator: true,
      },
    ],
  ].filter(Boolean),
};

Any help is really appreciated.
Best regards,

2

what version of babel/preset-react have you got?
It needs to be at least v7.9.0 to support the runtime: 'automatic' config

1 Like
3

Hello @coagmano

I have the following versions.

"@babel/eslint-parser": "^7.14.3",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@babel/register": "^7.13.16",

Thogut it would be because meteor is not working with babel.config.js file, but only with .babelrc file.
But still not working.

4

Iā€™m running into this too. Presets are as follows.

"presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }],
    "@babel/preset-typescript"
  ]

The Meteor docs do not seem to indicate that we can remove the import React from 'react'; line yet.

5

Hi @jhyman
Had a hard time finding this out, but I hope I can save you some hours.
Solves it by adding the plugin: @babel/plugin-transform-react-jsx, so my .babelrc looks like this:

{
  "presets": [
    "meteor",
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ],
  "plugins": [
    "@loadable/babel-plugin",
    ["@babel/plugin-transform-runtime", {
        "regenerator": true
    }],
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

Best regards,

4 Likes
6

God bless you, @luismoreno :slight_smile:

I got it working same as you, had to convert babel.config.js to .babelrc, here is how it looks like:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-typescript",
      {
        "onlyRemoveTypeImports": true
      }
    ],
    [
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic"
      }
    ]
  ]
}