Usage instructions from readme don't work with react-app-rewired >= 2.0

[egasimus]

The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins

I'm currently looking into a solution with the suggested customize-cra library. It seems to have functions for adding Babel plugins. Gonna try them out and report back.

[egasimus]

Working config-overrides.js (with react-app-rewired 2.1.3 and customize-cra 0.5.0, possibly also needs a manual install of react-scripts):

const {
  override,
  disableEsLint,
  addBabelPlugin,
} = require('customize-cra')

module.exports = override(
  disableEsLint(),
  addBabelPlugin('transform-react-pug')
)

disableEsLint is needed so it doesn't balk with 'pug' is not defined no-undef.

Alternative:

• config-overrides.js:

const {
  override,
  disableEsLint,
  useBabelRc
} = require('customize-cra')

module.exports = override(
  disableEsLint(),
  useBabelRc()
)

• .babelrc:

  {
  "plugins": [
  "transform-react-pug",
  "@babel/transform-react-jsx"
  ]
  }

(prefixing the JSX transform with @babel/ is what differs from the README)

[ezhlobo]

@egasimus yeah, it's hard to keep on track all other plugins. Thank you for notifying and for the workarounds. We definitely need to add it to README.

[gotexis]

not yet working with typescript i think, I receive a TSError, not a ESError...

[luikore]

Here's another solution without disabling eslint.

config-overrides.js:

const {override, addBabelPlugin} = require('customize-cra')

module.exports = override(
    addBabelPlugin('transform-react-pug')
)

Install eslint plugin for pug:

yarn add eslint-plugin-react-pug

Edit eslintConfig in package.json:

  "eslintConfig": {
    "extends": ["react-app", "plugin:react-pug/all"],
    "plugins": [
      "react-pug"
    ]
  },

.env:

EXTEND_ESLINT=true