Use single-spa systemjs in your create-react-app.

Quickly adapt react-scripts as a submodule of single-spa !!!
Support [email protected] [email protected] version.

• Support [email protected] compatible with common configuration migrations
• Output systemjs library auto add SystemJSPublicPathPlugin
• Support ReactFastRefresh hot refresh

npm i react-app-rewired-single-spa -D

This project is based on react-app-rewired.

/* config-overrides.js */
const {
  rewiredSingleSpa,
  rewiredSingleSpaDevServer,
} = require("react-app-rewired-single-spa");

module.exports = {
  webpack: rewiredSingleSpa(),
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      return rewiredSingleSpaDevServer()(config);
    };
  },
};

// use `customize-cra`
const { override, overrideDevServer } = require("customize-cra");

module.exports = {
  webpack: override(
    rewiredSingleSpa({
      orgName: "you",
      projectName: "test",
      reactPackagesAsExternal: true,
      peerDepsAsExternal: true,
      orgPackagesAsExternal: true,
    })
  ),
  devServer: overrideDevServer(rewiredSingleSpaDevServer()),
};

Type: string
The name of the organization this application is written for.

Type: string
The name of the current project. This usually matches the git repo's name.

Type: string
Default: src/{orgName}-{projectName}.{js|jsx|ts|tsx} src/index.{js|jsx|ts|tsx}
The entry file.

Type: string
Default:

• development {orgName}-{projectName}.[contenthash:8].js
• production {orgName}-{projectName}.js

Type: number
This is the rootDirectoryLevel that is passed to https://github.com/joeldenning/systemjs-webpack-interop.

Type: boolean
This will react react-dom as webpack externals or not.

Type: boolean
This changes whether package names that start with @your-org-name are treated as webpack externals or not.

Type: boolean
This will package.json peerDependencies as webpack externals or not.

• If react react-dom is external, react-dev-tool must be installed to refresh automatically. For details, please see facebook/react#17552
• Check whether the ws connection is normal, you can set in .env file
  • WDS_SOCKET_PORT "2002"
  • WDS_SOCKET_HOST "localhost"
  • WDS_SOCKET_PATH "/projectName" Please start with "/"

    The default hotreload client uses the relative website protocol, which is the protocol of the main base. It can use the localhost protocol and the local development port.

The following packages have been integrated by default, and the specified dependencies can be installed directly in the project.

{
  "url": "url",
  "fs": "fs",
  "assert": "assert",
  "crypto": "crypto-browserify",
  "http": "stream-http",
  "https": "https-browserify",
  "os": "os-browserify/browser",
  "buffer": "buffer",
  "stream": "stream-browserify"
}

You can use customize-cra removeModuleScopePlugin()

You can use customize-cra

adjustStyleLoaders(({ use: [, , postcss] }) => {
  const postcssOptions = postcss.options;
  postcss.options = { postcssOptions };
});

MIT © fupengl