Can't use in modules of SPA inside a single-spa app

[eroncardoso88]

Hello I'm getting the error

Could not find a required file. Name: index.html Searched in: D:\gitfolders\anl-www-root\anl-www-header\public

My folder structure is:

anl-www-root\

Single-spa with system.js, listed like so:

    <script type="systemjs-importmap">
      {
        "imports": {
          "@anl/root-config": "https://localhost:4200/anl-root-config.js",
          "@anl/anl-home": "https://localhost:8500/anl-home.js",
          "@anl/anl-header": "https://localhost:8600/anl-header.js",
          "@anl/anl-footer": "https://localhost:8700/anl-footer.js",
          "@anl/anl-utils": "https://localhost:8800/anl-utils.js"
        }
      }  
    </script> 

I'm trying to setup header to work with craco.

const path = require('path')
const singleSpaApplicationPlugin = require('craco-plugin-single-spa-application')
const SystemJSPublicPathPlugin = require("systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin")

const { whenDev } = require('@craco/craco')

module.exports = {
  webpack: {
    plugins: {
      add: [
        new SystemJSPublicPathPlugin({
          systemjsModuleName: `anl-header`,
          rootDirectoryLevel: 2,
        }),
      ],
      remove: ["HtmlWebpackPlugin"],
    },
    configure: webpackConfig => {
      webpackConfig.entry = path.resolve("src/index.tsx") //make sure this points to the new entry file you created in the previous step
      webpackConfig.output.filename = "anl-header.js"
      webpackConfig.output.libraryTarget = "system"
      return webpackConfig
    },
  },
  devServer: whenDev(() => ({
    https: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  })),
  plugins: [
    {
      plugin: singleSpaApplicationPlugin,
      options: {
        orgName: 'anl',
        projectName: 'header',
        entry: 'src/index.tsx',
        outputFilename: 'anl-header.js',
        orgPackagesAsExternal: false, 
        reactPackagesAsExternal: true, 
        minimize: false, 
      },
    },
  ],
}

Header package.json:

{
  "name": "@anl/header",
  "scripts": {
    "start": "craco start --config craco.config.js --port 8500",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "dependencies": {
    "@craco/craco": "^7.0.0-alpha.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "craco-plugin-single-spa-application": "^2.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "single-spa-react": "^5.0.0",
    "systemjs-webpack-interop": "^2.3.7",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.0"
  },
  "types": "dist/anl-header.d.ts"
}

Header index.tsx:

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

It's been a whole week and I'm still lost.

My goal is to make anl-root-config.js react anl-header so anl-home can reach anl-header through Parcel.

Thanks in advance.

[eroncardoso88]

I've been studying https://github.com/hasanayan/craco-plugin-single-spa-application/issues/23 but the only differences I seem to have is that

I didn't uninstall react-scripts I'm using single-spa-react 5.0.0 instead of 4.6.1 Maybe my folder/systemjs/single-spa is indeed different from this issue.

[prma85]

Did you get it solved?