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

Question

I am new in react-native and Im adding babel on my project. I have a function that returns a component.

But I am getting this error

on my function

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

}

on my 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
  };

};

what's wrong on my setup. Thank you!

Answer 1

I'm a react-native-dotenv maintainer. The library is no longer a preset. It should be moved to plugins.

Answer 2

I renamed my babel.config.js to .babelrc and added following code. It worked!

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