title: Babel failed to compile: .presets[1][0] must be a string, object, function — how to fix?
body: <p>My project is based on Create React App, but I had to eject for a few reasons. Still, I try my best to keep it up to the current CRA standards manually. My last update is not going so well, though. I'm getting the following error when trying to run the &quot;start&quot; command:</p>
  <pre><code>./apps/index.tsx
  Error: [BABEL] ./apps/index.tsx: .presets[1][0] must be a string, object, function
      at Array.forEach (&lt;anonymous&gt;)
      at Array.forEach (&lt;anonymous&gt;)
  </code></pre>
  <p>I have manually added some logs to ./node_modules/@babel/core/lib/config/validation/option-assertions.js, which gave me the following info:</p>
  <pre><code>LOG &quot;assertPluginItem ERROR inside IF block:&quot;
  
  LOG &quot;Item access(loc, 0)&quot;
  {
    type: 'access',
    name: 0,
    parent: {
      type: 'access',
      name: 1,
      parent: { type: 'option', name: 'presets', parent: [Object] }
    }
  }
  
  LOG &quot;Item loc&quot;
  {
    type: 'access',
    name: 1,
    parent: {
      type: 'option',
      name: 'presets',
      parent: { type: 'root', source: 'preset' }
    }
  }
  
  LOG &quot;Item value&quot;
  [ undefined, { development: true, runtime: 'automatic' } ]
  
  LOG &quot;pluginLoc&quot;
  {
    type: 'option',
    name: 'presets',
    parent: { type: 'root', source: 'preset' }
  }
  
  LOG &quot;pluginValue&quot;
  [
    [ [Function], { useBuiltIns: 'entry', corejs: 3, exclude: [Array] } ],
    [ undefined, { development: true, runtime: 'automatic' } ],
    [ [Function] ]
  ]
  
  </code></pre>
  <p>Clearly, the problem is this &quot;undefined&quot; in <code>[ undefined, { development: true, runtime: 'automatic' } ]</code> but based on the options passed to this failing plugin, the code is not on my setup files, but rather somewhere internal to Babel.</p>
  <p>I've tried adding logs to various files within Babel core without success, and I am out of ideas to figure out which plugin is failing and why. Would you have an idea that can help me out here?</p>
  <p>Here's what my webpack.config.js looks like:</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const PnpWebpackPlugin = require('pnp-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const safePostCssParser = require('postcss-safe-parser');
  const ManifestPlugin = require('webpack-manifest-plugin');
  const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  const getTheme = require('../theme');
  const paths = require('../paths');
  const getClientEnvironment = require('../env/getClientEnvironment');
  const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  
  const postcssNormalize = require('postcss-normalize');
  
  const appPackageJson = require(paths.appPackageJson);
  
  const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
  
  const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
  const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
  
  const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
  
  
  const cssRegex = /\.css$/;
  
  const hasJsxRuntime = (() =&gt; {
      if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
          return false;
      }
  
      try {
          require.resolve('react/jsx-runtime');
          return true;
      }
      catch (e) {
          return false;
      }
  })();
  
  module.exports = function getConfig(appName, webpackEnv = 'development', isHotModuleReloadEnabled = true) {
      const isEnvDevelopment = webpackEnv === 'development';
      const isEnvProduction = webpackEnv === 'production';
  
      const isEnvProductionProfile =
          isEnvProduction &amp;&amp; process.argv.includes('--profile');
  
      const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
  
      const shouldUseReactRefresh = env.raw.FAST_REFRESH;
  
  
      const getStyleLoaders = (cssOptions, preProcessor) =&gt; {
          const loaders = [
              isEnvDevelopment &amp;&amp; require.resolve('style-loader'),
              isEnvProduction &amp;&amp; {
                  loader: MiniCssExtractPlugin.loader,
                  options: paths.publicUrlOrPath.startsWith('.')
                      ? { publicPath: '../../' }
                      : {},
              },
              {
                  loader: require.resolve('css-loader'),
                  options: cssOptions,
              },
              {
                  loader: require.resolve('postcss-loader'),
                  options: {
                      ident: 'postcss',
                      plugins: () =&gt; [
                          require('postcss-flexbugs-fixes'),
                          require('postcss-preset-env')({
                              autoprefixer: {
                                  flexbox: 'no-2009',
                              },
                              stage: 3,
                          }),
                          postcssNormalize(),
                      ],
                      sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                  },
              },
          ].filter(Boolean);
          if (preProcessor) {
              loaders.push(
                  {
                      loader: require.resolve('resolve-url-loader'),
                      options: {
                          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                          root: paths.appSrc,
                      },
                  },
                  {
                      loader: require.resolve(preProcessor),
                      options: {
                          sourceMap: true,
                          globalVars: getTheme(appName),
                      },
                  },
              );
          }
          return loaders;
      };
  
      const alias = {
          ...paths.alias,
          app: paths.getAppPath(appName),
      };
  
      return {
          stats: 'verbose',
          name: appName,
          mode: isEnvProduction ? 'production' : isEnvDevelopment &amp;&amp; 'development',
          bail: isEnvProduction,
          devtool: isEnvProduction
              ? shouldUseSourceMap
                  ? 'source-map'
                  : false
              : isEnvDevelopment &amp;&amp; 'cheap-module-source-map',
          entry:
              isEnvDevelopment &amp;&amp; !shouldUseReactRefresh
                  ? [
                      webpackDevClientEntry,
                      paths.appStyles,
                      paths.appIndexJs,
                  ]
                  : [
                      paths.appStyles,
                      paths.appIndexJs,
                  ],
          output: {
              path: isEnvProduction ? paths.appBuild(appName) : undefined,
              pathinfo: isEnvDevelopment,
              filename: isEnvProduction
                  ? 'static/js/[name].[contenthash:8].js'
                  : isEnvDevelopment &amp;&amp; 'static/js/bundle.js',
              futureEmitAssets: true,
              chunkFilename: isEnvProduction
                  ? 'static/js/[name].[contenthash:8].chunk.js'
                  : isEnvDevelopment &amp;&amp; 'static/js/[name].chunk.js',
              publicPath: paths.publicUrlOrPath,
              devtoolModuleFilenameTemplate: isEnvProduction
                  ? (info) =&gt;
                      path
                          .relative(paths.appsPath, info.absoluteResourcePath)
                          .replace(/\\/g, '/')
                  : isEnvDevelopment &amp;&amp;
                  ((info) =&gt; path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
              jsonpFunction: `webpackJsonp${appPackageJson.name}`,
              globalObject: 'this',
          },
          optimization: {
              minimize: isEnvProduction,
              minimizer: [
                  new TerserPlugin({
                      terserOptions: {
                          parse: {
                              ecma: 8,
                          },
                          compress: {
                              ecma: 5,
                              warnings: false,
                              comparisons: false,
                              inline: 2,
                          },
                          mangle: {
                              safari10: true,
                          },
                          keep_classnames: isEnvProductionProfile, // eslint-disable-line camelcase
                          keep_fnames: isEnvProductionProfile, // eslint-disable-line camelcase
                          output: {
                              ecma: 5,
                              comments: false,
                              ascii_only: true,
                          },
                      },
                      sourceMap: shouldUseSourceMap,
                  }),
                  new OptimizeCSSAssetsPlugin({
                      cssProcessorOptions: {
                          parser: safePostCssParser,
                          map: shouldUseSourceMap
                              ? {
                                  inline: false,
                                  annotation: true,
                              }
                              : false,
                      },
                      cssProcessorPluginOptions: {
                          preset: ['default', { minifyFontValues: { removeQuotes: false } }],
                      },
                  }),
              ],
              splitChunks: {
                  cacheGroups: {
                      app: {
                          test: /[\\/]apps[\\/]/,
                          name: 'app',
                          chunks: 'all',
                      },
                      shared: {
                          test: /[\\/]shared[\\/]/,
                          name: 'shared',
                          chunks: 'all',
                      },
                      libs: {
                          test: /[\\/]libs[\\/]/,
                          name: 'libs',
                          chunks: 'all',
                      },
                      vendors: {
                          test: /[\\/]node_modules[\\/]/,
                          name: 'vendors',
                          chunks: 'all',
                      },
                  },
              },
              runtimeChunk: {
                  name: (entrypoint) =&gt; `runtime-${entrypoint.name}`,
              },
          },
          resolve: {
              modules: [
                  'node_modules',
                  paths.nodeModules,
                  paths.sharedSrc,
                  paths.libSrc,
              ].concat(
                  process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
              ),
              extensions: ['.tsx', '.ts', '.js'],
              alias,
              plugins: [
                  PnpWebpackPlugin,
              ],
          },
          resolveLoader: {
              plugins: [
                  PnpWebpackPlugin.moduleLoader(module),
              ],
          },
          module: {
              strictExportPresence: true,
              rules: [
                  { parser: { requireEnsure: false } },
                  {
                      oneOf: [
                          {
                              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                              loader: require.resolve('url-loader'),
                              options: {
                                  limit: 10000,
                                  name: 'static/media/[name].[hash:8].[ext]',
                              },
                          },
                          {
                              test: /\.(js|mjs|jsx|ts|tsx)$/,
                              include: [
                                  paths.appsPath,
                                  paths.sharedSrc,
                                  paths.libSrc,
                              ],
                              loader: require.resolve('babel-loader'),
                              options: {
                                  customize: require.resolve(
                                      'babel-preset-react-app/webpack-overrides',
                                  ),
                                  presets: [
                                      [
                                          require.resolve('babel-preset-react-app'),
                                          {
                                              runtime: hasJsxRuntime ? 'automatic' : 'classic',
                                          },
                                      ],
                                  ],
                                  plugins: [
                                      ['add-module-exports'],
                                      ['@babel/plugin-transform-modules-commonjs'], // only until no more module.exports = *
                                      ['module-resolver', { extensions: ['.js', '.ts', '.tsx'], alias }],
                                      [require.resolve('babel-plugin-named-asset-import'), {
                                          loaderMap: {
                                              svg: {
                                                  ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                                              },
                                          },
                                      }],
                                      isEnvDevelopment &amp;&amp; shouldUseReactRefresh &amp;&amp; require.resolve('react-refresh/babel'),
                                  ].filter(Boolean),
                                  cacheDirectory: true,
                                  cacheCompression: false,
                                  compact: isEnvProduction,
                              },
                          },
                          {
                              test: /\.(js|mjs)$/,
                              exclude: /@babel(?:\/|\\{1,2})runtime/,
                              loader: require.resolve('babel-loader'),
                              options: {
                                  babelrc: false,
                                  configFile: false,
                                  compact: false,
                                  presets: [
                                      [
                                          require.resolve('babel-preset-react-app/dependencies'),
                                          { helpers: true },
                                      ],
                                  ],
                                  cacheDirectory: true,
                                  cacheCompression: false,
  
                                  sourceMaps: shouldUseSourceMap,
                                  inputSourceMap: shouldUseSourceMap,
                              },
                          },
  
                          {
                              test: cssRegex,
                              use: getStyleLoaders({
                                  importLoaders: 1,
                                  sourceMap: isEnvProduction
                                      ? shouldUseSourceMap
                                      : isEnvDevelopment,
                              }),
                              sideEffects: true,
                          },
                          {
                              test: /\.(less)$/,
                              use: [
                                  isEnvDevelopment &amp;&amp; require.resolve('style-loader'),
                                  {
                                      loader: require.resolve('css-loader'),
                                      options: {
                                          importLoaders: 0,
                                          sourceMap: isEnvProduction
                                              ? shouldUseSourceMap
                                              : isEnvDevelopment,
                                      },
                                  },
                                  {
                                      loader: 'less-loader',
                                      options: {
                                          logLevel: 2,
                                          relativeUrls: true,
                                          globalVars: getTheme(appName),
                                          env: isEnvProduction ? 'production' : isEnvDevelopment &amp;&amp; 'development',
                                      },
                                  },
                                  require.resolve('import-glob-loader'),
                              ].filter(Boolean),
                              sideEffects: true,
                          },
                          {
                              loader: require.resolve('file-loader'),
                              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
                              options: {
                                  name: 'static/media/[name].[hash:8].[ext]',
                              },
                          },
                      ],
                  },
              ],
          },
          plugins: [
              new HtmlWebpackPlugin(
                  Object.assign(
                      {},
                      {
                          inject: true,
                          template: paths.appHtml,
                      },
                      isEnvProduction
                          ? {
                              minify: {
                                  removeComments: true,
                                  collapseWhitespace: true,
                                  removeRedundantAttributes: true,
                                  useShortDoctype: true,
                                  removeEmptyAttributes: true,
                                  removeStyleLinkTypeAttributes: true,
                                  keepClosingSlash: true,
                                  minifyJS: true,
                                  minifyCSS: true,
                                  minifyURLs: true,
                              },
                          }
                          : undefined,
                  ),
              ),
              isEnvProduction &amp;&amp;
              shouldInlineRuntimeChunk &amp;&amp;
              new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
              new InterpolateHtmlPlugin(
                  HtmlWebpackPlugin,
                  Object.assign({ FAVICON: `favicon-${appName}.ico?v3` }, env.raw),
              ),
              new ModuleNotFoundPlugin(paths.rootDirectory, paths.yarnLockFile),
              new webpack.DefinePlugin(env.stringified),
              isEnvDevelopment &amp;&amp; isHotModuleReloadEnabled &amp;&amp; new webpack.HotModuleReplacementPlugin(),
              isEnvDevelopment &amp;&amp;
              shouldUseReactRefresh &amp;&amp;
              new ReactRefreshWebpackPlugin({
                  overlay: {
                      entry: webpackDevClientEntry,
                      module: reactRefreshOverlayEntry,
                      sockIntegration: false,
                  },
              }),
              isEnvDevelopment &amp;&amp; new CaseSensitivePathsPlugin(),
              isEnvDevelopment &amp;&amp;
              new WatchMissingNodeModulesPlugin(paths.nodeModules),
              isEnvProduction &amp;&amp;
              new MiniCssExtractPlugin({
                  filename: 'static/css/[name].[contenthash:8].css',
                  chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
              }),
              new ManifestPlugin({
                  fileName: 'asset-manifest.json',
                  publicPath: paths.publicUrlOrPath,
                  generate: (seed, files, entrypoints) =&gt; {
                      const manifestFiles = files.reduce((manifest, file) =&gt; {
                          manifest[file.name] = file.path; // eslint-disable-line immutable/no-mutation
                          return manifest;
                      }, seed);
                      const entrypointFiles = entrypoints.main.filter(
                          (fileName) =&gt; !fileName.endsWith('.map'),
                      );
  
                      return {
                          files: manifestFiles,
                          entrypoints: entrypointFiles,
                      };
                  },
              }),
              new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
          ].filter(Boolean),
          node: {
              module: 'empty',
              dgram: 'empty',
              dns: 'mock',
              fs: 'empty',
              net: 'empty',
              tls: 'empty',
              child_process: 'empty',
          },
          performance: false,
      };
  };
  </code></pre>