React-app-rewired: How to customize babel with react-scripts v1 (webpack v2)

[comerc]

before:

// config-overrides.js

function rewire(config, env) {
  const babelrc = config.module.loaders.find(conf => {
    return conf.loader === 'babel'
  }).query
  babelrc.plugins = [
    'styled-jsx-postcss/babel',
  ].concat(babelrc.plugins || [])
  return config
}

module.exports = rewire

after:

// config-overrides.js

function rewire(config, env) {
  const babelOptions = config.module.rules.find(conf => {
    return conf.loader && conf.loader.includes('babel-loader')
  }).options
  const babelrc = require(babelOptions.presets[0])
  babelrc.plugins = [
    'styled-jsx-postcss/babel',
  ].concat(babelrc.plugins || [])
  babelOptions.presets = babelrc
  return config
}

module.exports = rewire

happy coding!

[mauriciosoares]

[timarney]

@comerc @mauriciosoares

You should be able to use injectBabelPlugin(pluginName, config) now.

See the config here https://github.com/timarney/mobx-rewire-test/blob/master/config-overrides.js

Will add to the Readme at some point.

[comerc]

@timarney how about array of plugins? :)

[timarney]

@comerc Feel free to give it a try you can find the code here https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewired/index.js