arackaf / customize-cra Goto Github PK
View Code? Open in Web Editor NEWOverride webpack configurations for create-react-app 2.0
License: MIT License
Override webpack configurations for create-react-app 2.0
License: MIT License
Hi, how to config when I use react-app-rewire-hot-loader? I tried, but didn't work:
const path = require('path');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const fixedHot = value => config => {
config = rewireReactHotLoader(config, process.env);
return config;
};
module.exports = {
webpack: override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
addWebpackAlias({
['@@']: path.resolve(__dirname, 'src/')
}),
fixedHot(),
),
devServer: function(configFunction) {
return function(proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.hot = true;
return config;
}
}
};
getBabelLoader
has a fallback when babel-loader
is not found using oneOf. Unfortunately, a oneOf
itself is required, because it bombs here
Line 35 in c088d01
use
arrayIn my shared-lib, I have a file that uses class properties that should be compiled by babel like the example below:
class Shared-utils {
someProp = () => {
//do stuff
}
export default Shared-utils
When I run npm start in my main project I get the following error:
SyntaxError: path-to-shared-lib/Shared-utiles.js: Support for the experimental syntax 'classProperties' isn't currently enabled (8:9):
...
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
I've run into the problem of create-app-rewired not working with cra 2.0
I need to change the globalObject to get web workers working.
Previously in create-app-rewired it was quite simple, config.output.globalObject= self
In this, the only mention I found of changing the config was in AdjustWorkbox.. I've tried this below and it's having no effect. Any clues?
const { override } = require("customize-cra");
const path = require('path')
module.exports = override(adjustWorkbox((config, env) => {
config.output.globalObject= `self`
return config
}))
I'm looking into how I can get Typescript to work with CRA 2.0. It seems like with Babel 7 that typescript support is enabled by setting a preset rather than just adding a plugin (see the below snippet). Any recommendations on what to do here?
https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/
Make sure your .babelrc has the right presets and plugins:
{
"presets": [
"@babel/env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
I have similar issue as here facebook/create-react-app#1005. How to solve it with customize-cra?
Greetings, I'm wonder if this alternative below is possible using customize-cra
.
two-quick-ways-to-reduce-react-apps-size-in-production
I've tried to find a github repo with something like, but no success.
Thanks.
addLessLoader works perfectly as intended to use LESS in the project; however it would be nice to use less css modules. I see it is already chaining style-loader and css-loader, but in order to use modules you need to give css-loader the option modules: true
. This is not possible in the current setup.
I could see others possible wanting to pass other options to css-loader as well, like sourceMap
or localIdentName
.
react-scripts v2.1.2 is not supported
Please export getBabelLoader
as well :)
I would like to change the autoprefixer configuration to include grid: 'autoplace'
. Is there a way to do that with customize-cra? I tried reloading autoprefixer as the following, but with no success: addPostcssPlugins([require('autoprefixer')({ grid: 'autoplace' })])
.
hello everyone, in the first thank of your work!
when i run yarn test
then throw below error
The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.
at validatePlugins (node_modules/@babel/parser/lib/index.js:10472:13)
at getParser (node_modules/@babel/parser/lib/index.js:10529:5)
at parse (node_modules/@babel/parser/lib/index.js:10513:12)
there is my config-overrides.js
const rewireMobX = require('react-app-rewire-mobx');
const rewireSass = require('react-app-rewire-scss');
module.exports = function override(config, env) {
config = rewireMobX(config, env);
config = rewireSass(config, env);
return config;
}
const { override, addDecoratorsLegacy, disableEsLint } = require("customize-cra");
module.exports = override(
addDecoratorsLegacy(),
disableEsLint()
);
and there is my package.json
{
"name": "react-blog",
"version": "0.1.0",
"private": true,
"dependencies": {
"mobx": "^5.5.2",
"mobx-react": "^5.3.5",
"react": "^16.6.0",
"react-app-rewire-mobx": "^1.0.9",
"react-dom": "^16.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.2",
"customize-cra": "^0.1.1",
"react-app-rewire-scss": "^1.0.2",
"react-app-rewired": "^1.6.2"
}
}
at last this error only throw in run yarn test
(when run yarn start
will be OK)
Hi everyone!
Thanks for creating this! Allowing us to try CRA2. I have made the switch and npm start works great but somehow when its time to create a build it appears the build stop somewhere.
Is there any way to debug what is happening? My reason for customize-cra was mobx. Thinking of going decorator-less right now.
tried this config:
const rewireMobX = require('react-app-rewire-mobx');
const { override, addDecoratorsLegacy, disableEsLint, addBundleVisualizer, addWebpackAlias, adjustWorkbox } = require("customize-cra");
const path = require("path");
/* config-overrides.js */
module.exports = function override(config, env) {
config = rewireMobX(config, env);
return config;
}
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
);
and this one
const { override, addDecoratorsLegacy, disableEsLint, addBundleVisualizer, addWebpackAlias, adjustWorkbox } = require("customize-cra");
const path = require("path");
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
);
Did i get something wrong ?
Hey @arackaf
This is not really an issue with your library but a somewhat related question.
Did you manage to get the decorators (Mobx) to work when running tests from CRA v2 ?
I understand that when running react-app-rewired test
, the config override is ignored. However, the .babelrc
is being read.
Adding
{
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}
results in Cannot use the decorators and decorators-legacy plugin together
.
Interestingly, that works just fine when starting the app telling it to use the same file , i.e useBabelRc .
Any idea ?
The question is also on Stackoverflow.
This is my config:
module.exports = override(
fixBabelImports('antd', {
libraryName: 'antd',
style: true
}),
useEslintRc(),
enableEslintTypescript()
);
And for some reason this is not working.
I'm using CRA 2.x with typescript, react-app-rewired
and babel-plugin-import
are installed properly.
Any thoughts?
I ran into a problem while trying to exclude some file extensions. How can I exclude all files ending with .config
, .overrides
or .variables
?
I tried following, but apparently it didn't work:
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting: true,
exclude: (wb.exclude || [/\.(config|overrides|variables)$/]).concat("index.html")
}))
More context:
https://stackoverflow.com/a/48608002/2632991
and
Semantic-Org/Semantic-UI-LESS#37
readme.md file has a typo at legacyDecorators
word.
If you want use @babel/plugin-proposal-decorators
with EsLint, you can enable useEslintRc
, described below, with the follow configuration in your .eslintrc
or package.json
:
{
"extends": "react-app",
"parserOptions": {
"ecmaFeatures": {
"legacyDecotators": true // this is an error
}
}
}
You need to use
{
"extends": "react-app",
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
}
}
Hi, the only thing I'm doing is module.exports = override(disableChunk())
and I'm not able to build. It gets out of memory. If I remove that it builds. Any idea? Cc @oknoorap.
<--- Last few GCs --->
[29301:0x103800000] 86077 ms: Mark-sweep 1329.1 (1467.4) -> 1329.0 (1468.9) MB, 1565.1 / 0.0 ms allocation failure GC in old space requested
[29301:0x103800000] 88059 ms: Mark-sweep 1329.0 (1468.9) -> 1329.0 (1434.9) MB, 1980.8 / 0.0 ms last resort GC in old space requested
[29301:0x103800000] 90274 ms: Mark-sweep 1329.0 (1434.9) -> 1329.0 (1434.9) MB, 2214.9 / 0.0 ms last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x1d38992a5879 <JSObject>
0: builtin exit frame: stringify(this=0x1d38992890a9 <Object map = 0x1d38c4a02ba1>,0x1d38798022d1 <undefined>,0x1d38798022d1 <undefined>,0x1d3890d8e5a1 <Object map = 0x1d38bf2e9a89>)
1: arguments adaptor frame: 1->3
2: toString [/Users/tibo/PTGEM/code/ptgem3D/frontend/node_modules/terser/dist/bundle.min.js:1] [bytecode=0x1d384dbf76e1 offset=28](this=0x1d38eaceaa81 <Object map = 0x1d...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
4: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
5: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
6: v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
7: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
8: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
9: v8::internal::JsonStringifier::Stringify(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
10: v8::internal::Builtin_Impl_JsonStringify(v8::internal::BuiltinArguments, v8::internal::Isolate*) [/Users/tibo/.nvm/versions/node/v8.11.3/bin/node]
11: 0x23062fe0697d
12: 0x23062fe0535f
13: 0x23062febd1d6
14: 0x23062febd1d6
15: 0x23062febd1d6
Is there posibility to injectManifest with new workbox configuration (runtimeCaching routs etc.)?
Thanks.
I used process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(), It doesn't work.
I try process.env.NODE_ENV == 'production ' && new BundleAnalyzerPlugin(), and It doesn't work too.
How do I get the packaging environment?
In Create-React-APP@2 and react-app-rewired
My config-overrides.js like this:
config-overrides.js
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
fixBabelImports('import', {
libraryName: '@alifd/next',
style: true,
}),
);
I try to read source code of fixBableImports, but I have no idea at all
I know that there is an option to enable eslint on ts|tsx files, I'm wondering whether I still need to include typescript-eslint-parser or you're using it already under the hood.
Thanks
I want to have a global config for babel 7 and was wondering if that's something that's possible or easy to add?
if (module.hot) {
module
.hot
.accept()
}
when i hot load cra, the func addBundleVisualizer() create a new tag for analyzing every time when i changed.
if i use addBundleVisualizer({}, true), the react-router can't apply to visit the report.html.
how i use addBundleVisualizer and the analyze page open once??
Hi, I'm wondering how it would be possible to specify babel plugin configuration using the addBabelPlugin
API. I've read
Line 21 in 0c57208
Namely, I'm trying to get flow-runtime's babel plugin working https://codemix.github.io/flow-runtime/#/babel-plugin-flow-runtime with configuration.
Normally, I'd configure it with .babelrc
by adding something like:
{
"presets": ["stage-2", "react"],
"plugins": [
"transform-decorators-legacy",
["flow-runtime", {
"assert": true,
"annotate": true,
"optInOnly": true,
}]
]
}
But customize-cra
doesn't seem to be picking up the config.
Any help would be appreciated, and thanks for the work on this!
In documentation i see:
webpack: override(
// usual webpack plugin
disableEsLint()
),
devServer: overrideDevServer(
// dev server plugin
watchAll()
)
is // dev server plugin
any javascript code?
in my case i want to use http-proxy-middleware package described in https://webpack.js.org/configuration/dev-server/#devserver-proxy
i cannot find the way to override the devserver port and proxy,could you give me a example,thanks
I just recently updated my dependencies but couldn't find any way to continue using my compression plugins together with customize-cra.
I got the following three plugins:
But I don't know how to include them with customize-cra.
I tried the ...addBabelPlugins but it doesn't work.
Is there any way to do this with customize-cra yet? Else I gotta stay on the older versions of cra and react-app-rewired unfortunately.
Hi,
is there any way to define environment variable in webpack config?
something like :
const rewireDefinePlugin = require('react-app-rewire-define-plugin')
// Use `webpack.DefinePlugin` to add the version number from package.json
config = rewireDefinePlugin(config, env, {
'process.env.VERSION': JSON.stringify(require('./package.json').version)
})
I'm looking to add tailwindcss to a non-ejected cra2 app, and to have tw processed by postcss. I could fork react-scripts, but would prefer to simply leverage customize-cra if I can. Thanks in advance for any help / guidance.
Could not find the LICENSE
Dear all,
I have some problem with Chrome debugger and react.
Whenever I started typing in the console in Chrome while breakpoint debugging, I have this message :
This problem is a new problem for me, now my JS file are seen in "static/js", and I think it was not the case before.
I have this configuration :
const { override, addDecoratorsLegacy, disableEsLint, addBundleVisualizer, addWebpackAlias, adjustWorkbox } = require("customize-cra");
const path = require("path");
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
addWebpackAlias({ ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js") }),
adjustWorkbox(wb => Object.assign(wb, { skipWaiting: true, exclude: (wb.exclude || []).concat("index.html") }))
);
And devDependencies :
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.2",
"customize-cra": "0.1.1"
Do you think it may be linked to some babel/file generation ?
Replace the loader configuration of the create-react-app
Is there a way to add a loader with some webpack configuration like this?https://ant.design/components/icon/#Custom-SVG-Icon
I found this example https://github.com/gitim/react-app-rewire-svgr/blob/master/index.js but I cannot make it works
Hi
Is there anyway this package could be used to add custom linting rules to a CRA2 app.
By default there are no stylistic rules applied to CRA and no way to add them without ejecting.
Thanks
Hi, great tool!
Could you explain to me how I can override or add to the original Webpack config?
I would like to add the following plugin to Webpack:
https://www.npmjs.com/package/bless-css-webpack-plugin#usage
Thanks!
Will useEslintRc
completely overwrite the CRA eslint config or it'll just extend it?
I want to reset historyApiFallback,but I can not do it
it looks like
devServer: overrideDevServer(
xxxxxxxxxxxxxxxxxx
)
Hi, am I able to pass something like this to the adjustWorkbox function?
self.addEventListener('message', event => {
if (!event.data) {
return;
}
switch (event.data) {
case 'skipWaiting':
self.skipWaiting();
break;
default:
// NOOP
break;
}
});
Line 172 in d000b48
I found the module refrence here. If i use a custom react-scripts version , it would crash with this report.
There should be an option to customize webpack's stats
attribute.
To solve this issue on mini-css-extract-plugin, it is required to change the property.
I'm doing this to add emotion support:
addBabelPlugin('emotion'),
it works just fine on yarn start
but if I run yarn test
I get the error saying that I'm trying to use the emotion shortcuts without the babel plugin.
Do I need to do something to inject the plugin in the Jest config?
My configs:
// package.json
"scripts": {
"start": "react-app-rewired start",
}
// config-overrides.js
const { addBabelPlugin } = require('customize-cra');
module.exports = function override(config, env) {
config = addBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
config,
);
return config;
};
Throw below error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration should be an object.
Hello,
As we're starting again from scratch, it would be a good time to think about the API we want to provide to rewired CRA consumers.
I'd like customize-cra
to take a more functional approach so we just have to import a bunch of addThing()
, provide their specifics options, and we're good to go! 🚀
This is what I have in mind :
// fantasy organization xD
const { override } = require('@react-app-rewired/core')
const addReactHotLoader = require('@react-app-rewired/add-react-hot-loader')
const addEmotion = require('@react-app-rewired/add-emotion')
const addBundleVisualizer= require('@react-app-rewired/add-bundle-visualizer')
module.exports = override(
addReactHotLoader , /* no options */
addEmotion(), /* can have options, here none given so falling back to emotion's defaults */
addBundleVisualizer({ reportFilename: 'bundle.html' })
)
The override
function is an helper providing the (config, env) to all the functions in the pipeline.
The addX
functions have to respect two criterias :
(config, [env])
. If they don't have any options then you can just write the (config, [env])
directly.config
object.And that's it!
The implementation of override
is :
const { flow, curry } = require('lodash')
function override(...pipeline) {
return function(config, env) {
return flow(
...pipeline.map(f => {
const curried = curry(f, 2)
return curried(curry.placeholder, env)
})
)(config)
}
}
And here is an example of "addX" library for webpack-bundle-visualizer
:
const { /* re-exported from lodash for convenience */ merge } = require('@react-app-rewired/core')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = function addBundleVisualizer(options) {
const defaultOptions = {
analyzerMode: 'static',
reportFilename: 'report.html'
}
return function(config) {
config.plugins.push(
new BundleAnalyzerPlugin(merge(defaultOptions, options))
)
return config
}
}
Also, installing @react-app-rewired/core
would be enough to get started with the scripts
in package.json
(either we include react-app-rewired
or we restart from scratch...)
What do you think? 💡
I was using this before with react-app-rewired
on CRA v1:
const path = require('path');
module.exports = function override(config, env) {
config.resolve = Object.assign({}, config.resolve, {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
});
return config;
};
Is there a way to do the equivalent with customize-cra
on CRA v2?
Hi,
First of all thanks for your work.
I don't seem to get mobx working using the latest beta-3 version.
I get
SyntaxError: /home/xxx/xxx.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (11:1):
11 | @Inject("rootStore")
My config-overrides.js
const { override, addDecoratorsLegacy, disableEsLint } = require("customize-cra"); module.exports = override( addDecoratorsLegacy(), disableEsLint() );
Hello,
the current implementation doesn't insert the plugin (in my case I tried with addBabelPlugin(['emotion'])(config)
).
This doesn't match the babel-loader
:
Array.isArray(r.use) && r.use.some(u => u.options && u.options.babelrc != void 0)
because the babel-loader doesn't have a use
key.
The two characteristics I use to spot the right babel-loader (there are 2 of them) are :
function addBabelPlugin(plugin) {
return function(config) {
const babelLoader = config.module.rules
.find(rule => Object.keys(rule).includes('oneOf'))
.oneOf.find(
rule =>
rule.loader &&
rule.loader.includes('babel-loader') &&
rule.options.customize
)
babelLoader.options.plugins.push(plugin)
return config
}
}
Hi, how can convert the following code?
const rewireStyledComponents = require('react-app-rewire-styled-components');
module.exports = function override(config, env) {
config = rewireStyledComponents(config, env, {
displayName: env !== 'production',
});
return config;
};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.