1. Use create-react-app+ant Design of React to create a custom theme using craco. Use single-spa references/SRC to create a custom theme using craco.
Module not found: You attempted to import ... which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Copy the code

Baidu will find relevant solutions as follows:

Play by the existing rules (move to src). But now you can know how to remove restriction: do eject and remove ModuleScopePlugin from webpack configuration file.
Copy the code

But replacing react-scripts with craco and eject craco run start does not execute webpack.config.js after eject. In this case, you need to use overrideWebpackConfig in the craco.config.js file. The configuration file is as follows:

// craco.config.js
const CracoLessPlugin = require('craco-less');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@layout-header-background': '#483D8B',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: {
        overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => {
          return cracoConfig;
        },
        overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
          webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(p => p.constructor.name !== 'ModuleScopePlugin');

          // throw new Error('error');
          return webpackConfig;
        },
        overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => {
          return devServerConfig;
        },
        overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => {
          return jestConfig;
        },
      },
      options: {},
    },
  ],
};

Copy the code