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! retail-platform@0.1.0 start-js: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the retail-platform@0.1.0 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! retail-platform@0.1.0 start: `npm-run-all -p watch-css start-js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the retail-platform@0.1.0 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 0848602

[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 react-app-rewired@2.x .

what should i do in and-design ?

make sure u installed 'customize-cra' and react-app-rewired@2.x
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 react-app-rewired@2.x .

what should i do in and-design ?

make sure u installed 'customize-cra' and react-app-rewired@2.x
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 react-app-rewired@2.x .

what should i do in and-design ?

make sure u installed 'customize-cra' and react-app-rewired@2.x
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

[tianzige666]

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

[maximcoding]

what about less modules and typescript ?

[maximcoding]

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 react-app-rewired@2.x .

what should i do in and-design ?

make sure u installed 'customize-cra' and react-app-rewired@2.x
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 arackaf/customize-cra#253

[instantlinux]

A solution: all the above is clear as mud to us backend engineers just starting out with React, iterating on the community's 3 or 4 years' worth of hackish workarounds to fundamental problems with create-react-app. I've been googling for hours, and it turns out you don't need react-app-rewired at all. Here's the deprecated configuration which I'd hoped would achieve the goal of publishing my jsx-format component classes to npmjs.com:

module.exports = {
  webpack: function(config, env) {
      if (env !== 'production') {
	  return config;
      }
      config = injectBabelPlugin(['@babel/plugin-transform-react-jsx'])
      return config;
  }
};

Here's my answer (hopefully helps others who follow the same google rabbit-hole): define these in your package.json:

  "main": "./build/index.js",
  "module": "./build/index.js",
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "commander": "^7.2.0",
    ...
  },
  "scripts": {
    ...
    "transpile": "NODE_ENV=production npx babel --out-dir ../build --relative --copy-files src",
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },

The npm transpile ; npm publish commands should now work. I found that due to the issue described here by Utku Gultopu, users of yarn will need to do this beforehand to fully upgrade from babel 6 to 7:

npm install @babel/core @babel/cli @babel/preset-react @babel/preset-env

Note: Here are the error messages this is intended to resolve for users of create-react-admin.

Support for the experimental syntax 'jsx' isn't currently enabled (27:12):
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
#  (or when trying injectBabelPlugin)
Error: 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