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.

Replace the loader configuration of the create-react-app

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 :

• Take their specific options and return a function accepting (config, [env]). If they don't have any options then you can just write the (config, [env]) directly.
• Always return the altered 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? 💡

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 have similar issue as here facebook/create-react-app#1005. How to solve it with customize-cra?

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 want to have a global config for babel 7 and was wondering if that's something that's possible or easy to add?

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;
};

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;
    }
  }
};

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.

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
    }
  }
}

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??

react-scripts v2.1.2 is not supported

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.

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

In 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.

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.

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() );

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.

Could not find the LICENSE

Hi, I'm wondering how it would be possible to specify babel plugin configuration using the addBabelPlugin API. I've read

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!

Please export getBabelLoader as well :)

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'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 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 reset historyApiFallback，but I can not do it

it looks like
devServer: overrideDevServer(
xxxxxxxxxxxxxxxxxx
)

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?

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 :

• The loader name contains "babel-loader"
• It has a "customize" key

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
  }
}

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' })]).

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!

I found the module refrence here. If i use a custom react-scripts version , it would crash with this report.

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 ?

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)

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.

Is there posibility to injectManifest with new workbox configuration (runtimeCaching routs etc.)?
Thanks.

getBabelLoader has a fallback when babel-loader is not found using oneOf. Unfortunately, a oneOf itself is required, because it bombs here

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?

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

Will useEslintRc completely overwrite the CRA eslint config or it'll just extend it?

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

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;
      }
});

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?

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.

i cannot find the way to override the devserver port and proxy,could you give me a example,thanks

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?

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 ?

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"
    ]
}

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