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

Ionic Framework Ionic React
1

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

3 Likes
2

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?

1 Like
3

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

4

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.

5

Thank you so much .

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

6

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

7

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

8

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",
9

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.

1 Like
11

I also would like to override react-scrips. Please add this feature.

12

I would like to use node-polyfill-webpack-plugin which requires me to modify webpack plugins list. with just react-scripts this is not possible

1 Like
13

updating a old ionic app, needing this to, is there any way to override ionic cli commands?

or at least know all the commands that ionic cli runs to achieve same as “ionic cap build android”

i tried to see the code from ionic/cli repo but i am to dumb do achieve that.