Argument of type '() => Promise<System.Module>' is not assignable to parameter of type 'Application<{}>'.

[danilobatistaqueiroz]

The project in github: https://github.com/danilobatistaqueiroz/labs-single-spa

When I try to register an application in -root-config.ts I get these errors:

---

When using:

registerApplication({
  name: '@labs/navbar',
  app: System.import('@labs/navbar'),
  activeWhen: '/'
});

Type 'Promise' is not assignable to type 'Application<{}>'.ts(2322) single-spa.d.ts(133, 5): The expected type comes from property 'app' which is declared here on type 'RegisterApplicationConfig<{}>'

---

And this error when usig:

registerApplication(
  '@labs/navbar',
  () => System.import('@labs/navbar'),
  location => location.pathname.startsWith('/')
);

Argument of type '() => Promise' is not assignable to parameter of type 'Application<{}>'. Type '() => Promise' is not assignable to type '(config: AppProps) => Promise<LifeCycles<{}>>'. Type 'Promise' is not assignable to type 'Promise<LifeCycles<{}>>'. Type 'Module' is missing the following properties from type 'LifeCycles<{}>': bootstrap, mount, unmountts(2345)

---

How I created the project:

---

package.json:

{
  "name": "@labs/root-config",
  "scripts": {
    "start": "webpack serve --port 9000 --env isLocal",
    "lint": "eslint src --ext js,ts,tsx",
    "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "prepare": "husky install",
    "build": "concurrently pnpm:build:*",
    "build:webpack": "webpack --mode=production",
    "build:types": "tsc"
  },
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/eslint-parser": "^7.23.3",
    "@babel/plugin-transform-runtime": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/runtime": "^7.23.3",
    "concurrently": "^6.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.1",
    "html-webpack-plugin": "^5.3.2",
    "husky": "^7.0.2",
    "jest": "^27.5.1",
    "jest-cli": "^27.5.1",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "serve": "^13.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0",
    "@babel/preset-typescript": "^7.23.3",
    "eslint-config-ts-important-stuff": "^1.1.0",
    "typescript": "^4.3.5",
    "webpack-config-single-spa-ts": "^4.0.0",
    "ts-config-single-spa": "^3.0.0"
  },
  "dependencies": {
    "@types/jest": "^27.0.1",
    "@types/systemjs": "^6.1.1",
    "single-spa": "^5.9.3",
    "@types/webpack-env": "^1.16.2",
    "single-spa-layout": "^1.6.0"
  },
  "types": "dist/labs-root-config.d.ts"
}

[danilobatistaqueiroz]

The problem was solved:

registerApplication({
  name: "@labs/navbar",
  app: () => (System.import("@labs/navbar") as any),
  activeWhen: ["/"]
});

const y = await System.import('@labs/navbar');
registerApplication(
  '@labs/navbar',
  () => y.default,
  location => location.pathname.startsWith('/')
);