sdk-dapp versions >= 2.25.2 is not supported in CRA projects due to axios >= 1.x used by various @multiversx sdks

[CiprianDraghici]

As a workaround please check this thread: https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093

ex.

1. Add craco add dev dependency yarn add -D @craco/craco
2. Create craco.config.js file on the project root

module.exports = {
  webpack: {
    configure: config => ({
      ...config,
      module: {
        ...config.module,
        rules: config.module.rules.map(rule => {
          if (rule.oneOf instanceof Array) {
            // eslint-disable-next-line no-param-reassign
            rule.oneOf[rule.oneOf.length - 1].exclude = [
              /\.(js|mjs|jsx|cjs|ts|tsx)$/,
              /\.html$/,
              /\.json$/,
            ];
          }
          return rule;
        }),
      },
    }),
  },
};

3. Change the build and (or) start scripts in package.json by replacing react-scripts with craco. Check the docs for further details: https://github.com/dilanx/craco

[damienen]

One more way of solving this is:

1. Adding react-app-rewired as a dev dependency

2. Adding a config-overrides.js file with this code:

const getCacheIdentifier = require("react-dev-utils/getCacheIdentifier");

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";

module.exports = function override(config, webpackEnv) {
  console.log("overriding webpack config...");

  const isEnvDevelopment = webpackEnv === "development";
  const isEnvProduction = webpackEnv === "production";
  const loaders = config.module.rules[1].oneOf;

  loaders.splice(loaders.length - 1, 0, {
    test: /\.(js|mjs|cjs)$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve("babel-loader"),
    options: {
      babelrc: false,
      configFile: false,
      compact: false,
      presets: [[require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]],
      cacheDirectory: true,
      // See #6846 for context on why cacheCompression is disabled
      cacheCompression: false,
      // @remove-on-eject-begin
      cacheIdentifier: getCacheIdentifier(isEnvProduction ? "production" : isEnvDevelopment && "development", [
        "babel-plugin-named-asset-import",
        "babel-preset-react-app",
        "react-dev-utils",
        "react-scripts",
      ]),
      // @remove-on-eject-end
      // Babel sourcemaps are needed for debugging into node_modules
      // code.  Without the options below, debuggers like VSCode
      // show incorrect code and set breakpoints on the wrong lines.
      sourceMaps: shouldUseSourceMap,
      inputSourceMap: shouldUseSourceMap,
    },
  });

  return config;
};

3. Changereact-scripts to react-app-rewired

[damienen]

One more thought on this.

One should install @craco/craco instead of simply craco (that's the official package)