addBabelPlugin not inserting the plugin

[jgoux]

Hello,

the current implementation doesn't insert the plugin (in my case I tried with addBabelPlugin(['emotion'])(config)).

This doesn't match the babel-loader :

Array.isArray(r.use) && r.use.some(u => u.options && u.options.babelrc != void 0)

because the babel-loader doesn't have a use key.

The two characteristics I use to spot the right babel-loader (there are 2 of them) are :

• The loader name contains "babel-loader"
• It has a "customize" key

function addBabelPlugin(plugin) {
  return function(config) {
    const babelLoader = config.module.rules
      .find(rule => Object.keys(rule).includes('oneOf'))
      .oneOf.find(
        rule =>
          rule.loader &&
          rule.loader.includes('babel-loader') &&
          rule.options.customize
      )

    babelLoader.options.plugins.push(plugin)

    return config
  }
}

[ltkn]

the issue might be the declaration here 57bb094#diff-168726dbe96b3ce427e7fedce31bb0bcR16

[walmor]

I was facing the same issue and I did a little further investigation to understand the problem. Hope that can help.

I was using the react-scripts version 2.0.3, that was released two days ago (Oct, 1th). The PR #5170 was merged two days before the release, where they removed the thread-loader. That PR changed the shape of the configuration object, removing the use array from the babel loader rule.

That means that the current version of the customize-cra works well for react-scripts@2.0.0.next.* versions but it doesn't work for the version 2.0.3.

To avoid a breaking change for the users using versions 2.0.0, I came up with a version of the addBabelPlugin that is able to handle both versions.

function addBabelPlugin(plugin, config, env) {
  const babelLoaderFilter = rule =>
    rule.loader && rule.loader.includes('babel') && rule.options && rule.options.plugins;

  // First, try to find the babel loader inside the oneOf array.
  // This is where we can find it when working with react-scripts@2.0.3.
  let loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;

  let babelLoader = loaders.find(babelLoaderFilter);

  // If the loader was not found, try to find it inside of the "use" array, within the rules.
  // This should work when dealing with react-scripts@2.0.0.next.* versions.
  if (!babelLoader) {
    loaders = loaders.reduce((ldrs, rule) => ldrs.concat(rule.use || []), []);
    babelLoader = loaders.find(babelLoaderFilter);
  }

  babelLoader.options.plugins.push(plugin);

  return config;
}

That code is not fully tested. I've only done some simple test against the versions 2.0.3 and 2.0.0-next.fb6e6f70 (the lastest 2.0.0.next.* version). Probably more tests would be necessary before using it as the actual implementation.

[war3k]

try to use my fork :
https://github.com/war3k/customize-cra

[priezz]

@war3k Thanks, it works! You should probably send a PR with the changes given.

[war3k]

sure, I already did that :)

[arackaf]

Seems Dan Abramov moved my cheese :P

@walmor's fix is updated for the new 0.1.X api, and released under 0.1.0-beta4.