How to customize IONIC React - custom webpack with config-overrides.js?

Hello everyone

I have an ionic react app and i’m using a (zappar) package which need to customize webpack to run and build correctly, i created a file config-overrides.js and every thing works fine when i run the app by npm start but when i use ionic serve i get error because ionic serve is not using the config-overrides.js file and i do not know how to make ionic to use that file but its just using react-app on build and run which npm start use react-app-rewired

Thanks for the help i really appreciate it

ionic serve is just running react-scrips directly, so nothing should be changing. How are you applying the config-overrides or customizing the webpack config?

Thank you very much for your reply

I see that ionic use react-scripts by default , what i want is to use react-app-rewired in ionic and i do not know how to use that.

I installed react-app-rewired so it use config-overrides.js but just when i run npm start.
When i use ionic service it is not using react-app-rewired

And this is the project which i’m working on it :
arbook

Yeah, that’s not going to be possible, at least for now. The CLI is hard-coded to call “react-script” and not any npm script directly.

Thank you so much .

It will be great if ionic team worked on that , because many react plugin require changing webpack config.

just curious, why do you want to customize the webpack config?

I’m using a new package by zappar this is the link to their package zappar-react

Im using image-tracking from their package.
It is require to change configuration by using config-overrides.js and the configuration as below :

module.exports = {
  webpack: function (config, env) {
    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|zbin|jsx|ts|tsx)$/, /\.html$/, /\.json$/];
        return {
          ...rule,
          oneOf: [{
              test: /zcv\.wasm$/,
              type: "javascript/auto",
              loader: "file-loader",
              options: {
                outputPath: 'zcv',
                name: '[name].[ext]',
              },
            },
            ...rule.oneOf
          ]
        };
      }
      return rule;
    });

    config.resolve.extensions.push(".wasm")
    return config;
  },
  jest: function (config) {
    return config;
  },
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.https = true
      return config;
    };
  },
  paths: function (paths, env) {
    return paths;
  },
}

if i run my app without this configuration i get this error which is when using ionic serve :

./node_modules/@zappar/zappar-cv/lib/zcv.wasm
Module parse failed: magic header not detected
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/file-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: magic header not detected

But with the configuration above and using npm start i do not get any error

You can try using @craco/craco - npm instead. Then you can change your package.json scripts to use craco:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",

I am, for one, is turned off because of lots of TS and eslint errors that obsturct the build process and clutter the console.
If I could modify the default webpack config of the CRA - I’d be able to suppress them.