@babel/preset
already has support for what you need. According to the react 17 documentation I only had to set the runtime
to automatic
in my babel.config.json
.
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}
If you are using @babel/plugin-transform-react-jsx
the config should be
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}
The latter is usually not needed since @babel/preset-react
includes @babel/plugin-transform-react-jsx
.
Why you shouldn’t use import React from 'react';
The documentation states:
- There are some performance improvements and simplifications that
React.createElement
does not allow.
There is also a technical RFC that explains how the new transformation works.
If you want to upgrade. React also provides an automated script that removes unnecessarry imports from your code.