Closed flyingcrp closed 5 years ago
我也遇到这个问题 mark一下
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
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.
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
.
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" }
})
);
HERE IS THE SOLUTION !
WHY IT HAPPENED ?
the new version of
react-app-rewired
removed all the methods likeinjectBabelPlugin
. these methods are moved into a new package called 'customize-cra' , which depends onreact-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?
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'
})
);
HERE IS THE SOLUTION !
WHY IT HAPPENED ?
the new version of
react-app-rewired
removed all the methods likeinjectBabelPlugin
. these methods are moved into a new package called 'customize-cra' , which depends onreact-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
i want to use viewport ,how to config it . react-app-rewire-postcss.
what about less modules and typescript ?
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
HERE IS THE SOLUTION !
WHY IT HAPPENED ?
the new version of
react-app-rewired
removed all the methods likeinjectBabelPlugin
. these methods are moved into a new package called 'customize-cra' , which depends onreact-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.
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:
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: check this issue https://github.com/arackaf/customize-cra/issues/253
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
i update react-app-rewired 2.0.1 to fixed #343 but
injectBabelPlugin
cannot work.env:
config-overrides.js
i got this error
well. how to fixed this ?