如何将React-app-rewired与Customize-CRA集成

Question

I want to override the Webpack config by react-app-rewired. But I using Ant design for my project, so I must use Customize-CRA to import Babel plugin, etc. How to using React-app-rewired and Customize-CRA together.

The config-overrides.js for React-app-rewired as below:

module.exports = function override(config, env) {
  config.module.rules = config.module.rules.map(rule => {
        if (rule.oneOf instanceof Array) {
            return {
                ...rule,
                oneOf: [
                    {
                        test: /\.(svg|png|jpg|jpeg|gif|bmp|tiff)$/i,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: '[path][name]-[hash:8].[ext]'
                                }
                            }
                        ]
                    },
                    ...rule.oneOf
                ]
            };
        }

        return rule;
    });

  return config;
}

The config-overrides.js for Customize-CRA as below:

const {override, fixBabelImports, addLessLoader, addDecoratorsLegacy, disableEsLint} = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy(),
  disableEsLint(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {'@primary-color': '#a50052'},
  }),
);

Thank you.

Answer 1

I think I ran into the same problem you did. The customize-cra override takes any number of override functions as arguments. Each function is given config as its first argument. Think of it as a compose function. Take your existing override export, put it into a function you define, I called myOverrides or something, then export customize-cra's override with your override function as one of the arguments.

before:

module.exports = function override(config, env){
  // do stuff to config
  return config
}

after:

function myOverrides(config) {
  // do stuff to config
  return config
}

module.exports = override(
  myOverrides,
  addDecoratorsLegacy(),
  disableEsLint(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {'@primary-color': '#a50052'},
  }),
);

Answer 2

Putting react-app-rewired config AFTER customize-cra worked for me. It doesn't work though if I assign an object to config, but works if I fix config line by line. I'm sure there is a more elegant solution.

 module.exports = function override(config, env) { const APP = process.env.REACT_APP_APP const BRAND = process.env.REACT_APP_BRAND addWebpackAlias({ ['@app-config']: path.resolve(__dirname, `./src/brands/${BRAND}/app`), }) config.entry = `./src/${APP}/index.js` config.resolve.alias['@app-config'] = path.resolve(__dirname, `./src/brands/${BRAND}`) config.resolve.modules = [ path.join(__dirname, `src/brands/${BRAND}`) ].concat(config.resolve.modules) return config }; 

Answer 3

I found tips from document of ant design:

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


module.exports = override( 
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    style: 'css'
  })
);

Ref:

https://mobile.ant.design/docs/react/use-with-create-react-app#Use-modularized-antd-mobile