Search code examples
iosreact-nativenpmbabeljsbabel-loader

.plugins[0][1] must be an object, false, or undefined


I faced mentioned error when I ran my project in iOS. As per this SO Question issue must be in babel.config.js,

My babel.config.js looks likes this,

 module.exports = {
 presets: ['module:metro-react-native-babel-preset'],
 plugins: [[
     "react-native-reanimated/plugin",  
     "babel-plugin-transform-remove-imports", {
        "test": ['react-toastify', 
            'exceljs', 
            'file-saver', 
            /excelutils/, 
            'react-select', 
            'react-popover', 
            'react-router-dom', 
            'react-pivottable', 
            'react-chartjs-2', 
            'react-data-grid', 
            'chartjs-plugin-colorschemes', 
            'chartjs-plugin-piechart-outlabels', 
            'file-saver',
            'create-react-class',
            'react-dropzone', 
            /documentuploadmodal/, 
            /richtextmodal/, 
            /locationmastermapmodal/]
      }
    ]
  ]
};

This is my package.json

   "devDependencies": {
      "@babel/core": "^7.12.9",
      "@babel/runtime": "^7.12.5",
      "@react-native-community/eslint-config": "^2.0.0",
      "babel-jest": "^26.6.3",
      "eslint": "7.14.0",
      "jest": "^26.6.3",
      "metro-react-native-babel-preset": "^0.66.2",
      "react-test-renderer": "17.0.2"
   }

I couldn't find any flaw in babel.config.js.

Note: I am facing this issue only when running in iOS. working well in Android. Running in Xcode 13.2.1

Can some one help me to resolve this issue?

Thank you.


Solution

  • It seems that you have included two plugins in a nested array. Also, reanimated was recommended to be placed at the end. Change that to the followings:

    [
        [ 'babel-plugin-transform-remove-imports',
            {
                test: [ 'react-toastify',
                    'exceljs',
                    'file-saver',
                    /excelutils/,
                    'react-select',
                    'react-popover',
                    'react-router-dom',
                    'react-pivottable',
                    'react-chartjs-2',
                    'react-data-grid',
                    'chartjs-plugin-colorschemes',
                    'chartjs-plugin-piechart-outlabels',
                    'file-saver',
                    'create-react-class',
                    'react-dropzone',
                    /documentuploadmodal/,
                    /richtextmodal/,
                    /locationmastermapmodal/ ],
            },
        ],
        'react-native-reanimated/plugin',
    ];