将 @babel/preset-react (https://git.io/JfeDR) 添加到 Babel 配置的 'presets' 部分以启用转换

Question

我是 react-native 的新手，我在我的项目中添加了 babel。我有一个 returns 组件的功能。

但是我收到这个错误

关于我的职能

const renderComponent = () => {
   return (
     <View>
      ....
     </View>

}

在我的 babel.config.js

// const path = require('path');

require('dotenv').config();

const { NODE_ENV } = process.env;
console.log(__dirname);

const DEFAULT_PLUGINS = [
  'module:react-native-dotenv',
  '@babel/plugin-transform-react-jsx',
  '@babel/plugin-transform-react-display-name',
  '@babel/plugin-syntax-jsx'
];

module.exports = function (api) {
  const presets = [
    'module:metro-react-native-babel-preset',
    'react',
    'react-native',
    '@babel/preset-react',
  ];
  const plugins = NODE_ENV === 'development'
    ? DEFAULT_PLUGINS
    : [...DEFAULT_PLUGINS, 'transform-remove-console'];

  api.cache(false);

  return {
    presets,
    plugins
  };

};

我的设置有什么问题。谢谢！

Answer 1

我将 babel.config.js 重命名为 .babelrc 并添加了以下代码。成功了！

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

Answer 2

我是 react-native-dotenv 维护者。该库不再是预设。它应该被移动到插件中。

将 @babel/preset-react (https://git.io/JfeDR) 添加到 Babel 配置的 'presets' 部分以启用转换

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation

reactjs

babeljs

react-native