React-app-rewired: injectBabelPlugin is broken in react-app-rewired 2.0.1

[flyingCrp]

i update react-app-rewired 2.0.1 to fixed #343
but injectBabelPlugin cannot work.

env:

"react-app-rewired": "^2.0.1",
"react-scripts": "^2.1.3"
"react": "^16.7.0",

config-overrides.js

/** @format */

const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireEslint = require('react-app-rewire-eslint');

module.exports = function override(config, env) {
    config = injectBabelPlugin(
        ['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}],
        config,
    );
    config = rewireLess.withLoaderOptions({
        modifyVars: {
            '@table-padding-vertical': '10px',
            '@table-padding-horizontal': '10px',
            '@form-item-margin-bottom': '10px',
        },
        javascriptEnabled: true,
    })(config, env);
    config = rewireEslint(config, env);
    return config;
};

i got this error

injectBabelPlugin is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start-js: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start-js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AlexChen\AppData\Roaming\npm-cache\_logs\2019-01-07T04_44_08_739Z-debug.log
ERROR: "start-js" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm-run-all -p watch-css start-js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AlexChen\AppData\Roaming\npm-cache\_logs\2019-01-07T04_44_08_970Z-debug.log

well.
how to fixed this ?

[luotingv1]

我也遇到这个问题 mark一下

[hsz]

From README:

Version 2.0 removes the rewire helper functions

All helper functions:

• injectBabelPlugin
• compose
• getBabelLoader
• getLoader
• babelLoaderMatcher

• loaderNameMatches

  have been removed with commit https://github.com/timarney/react-app-rewired/commit/08486022685a5429ff3224367d89ba5acd79bde9

[timarney]

Checkout something like customize-cra for helpers which uses this repo as a dependancy https://github.com/arackaf/customize-cra#addbabelpluginsplugins .

If you take a look there @arackaf has quite a few helpers far beyond what was part of this repo.

https://github.com/arackaf/customize-cra#addlessloaderloaderoptions

This repo will at this point focus on the basics of exposing the config.

You can also write your own helpers.

[qxchen6]

HERE IS THE SOLUTION !

WHY IT HAPPENED ?

the new version of react-app-rewired removed all the methods like injectBabelPlugin .
these methods are moved into a new package called 'customize-cra' , which depends on [email protected] .

what should i do in and-design ?

make sure u installed 'customize-cra' and [email protected]
make sure u installed 'less' and 'less-loader'

and then here is the config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

[sdli]

HERE IS THE SOLUTION !

WHY IT HAPPENED ?

the new version of react-app-rewired removed all the methods like injectBabelPlugin .
these methods are moved into a new package called 'customize-cra' , which depends on [email protected] .

what should i do in and-design ?

make sure u installed 'customize-cra' and [email protected]
make sure u installed 'less' and 'less-loader'

and then here is the config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

Does your cssModules work?

[phungrk]

My config-overrides.js (I'm using antd-mobile-samples/create-react-app/ boilerplate)

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override( 
  fixBabelImports("babel-plugin-import", {
    libraryName: "antd-mobile",
    style: true
  }),
  addLessLoader({
    ident: 'postcss'
  })
);

[dance2die]

HERE IS THE SOLUTION !

WHY IT HAPPENED ?

the new version of react-app-rewired removed all the methods like injectBabelPlugin .
these methods are moved into a new package called 'customize-cra' , which depends on [email protected] .

what should i do in and-design ?

make sure u installed 'customize-cra' and [email protected]
make sure u installed 'less' and 'less-loader'

and then here is the config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

This worked beautifully.

If anyone has a failing build/deployment, make sure to install less & less-loader.

https://github.com/arackaf/customize-cra#addlessloaderloaderoptions

[crazySadSoul]

i want to use viewport ,how to config it . react-app-rewire-postcss.

[nutrimax1987]

what about less modules and typescript ?

[nutrimax1987]

Figured it Out . if some needs 'create-react-app with Ant-Design , less modules, Typescript example
https://github.com/nutrimax1987/create-react-app-ts-antd-less

[rririanto]

HERE IS THE SOLUTION !

WHY IT HAPPENED ?

the new version of react-app-rewired removed all the methods like injectBabelPlugin .
these methods are moved into a new package called 'customize-cra' , which depends on [email protected] .

what should i do in and-design ?

make sure u installed 'customize-cra' and [email protected]
make sure u installed 'less' and 'less-loader'

and then here is the config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

Thank you it works like a charm.

[packetstracer]

Thanks for the solution, but I'm not getting it to work. Anyone can help or give me a hint about how to solve the issue?

My setup:

• Create React App 4.0.0
• React App Rewired 2.1.8
• Customize CRA 1.0.0
• Postcss 8.2.10
• Less 4.1.1
• Less Loader 8.1.1
• Ant Design
• Tailwind CSS

When running yarn start, I get the following error:

Failed to compile.

./src/entities/scratchpad/theme/antd/custom-theme.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./src/entities/scratchpad/theme/antd/custom-theme.less)
TypeError: this.getOptions is not a function

I have Tailwind installed and running so I guess that de postcss-loader is not the problem. I've read that the problem maybe with less-loader version, but cannot get ant version of it working.

Anyone knows why may be this happening and how to solve it?

Solved

SOLVED: check this issue https://github.com/arackaf/customize-cra/issues/253