Updating to single-spa-layout 2.1.0 causing errors when checking types

[jhdielman]

Hi all! Getting an error on the npm run build:types (tsc) stage of the build process. I set up the root-config project using create-single-spa. I then updated single-spa-layout to "^2.1.0" and ran npm run build .

Steps to reproduce

1. Create root-config project by running creat-single-spa
2. Select root-config
3. Confirm the project will use TypeScript
4. Confirm the project will use single-spa-layout
5. Delete node_modules and package-lock.json
6. After the project is created, update single-spa-layout to version 2.1.0
7. Run npm i
8. Run npm run build

Error

[build:*types] node_modules/single-spa-layout/dist/types/browser/constructApplications.d.ts(36,5): error TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.
[build:*types] node_modules/single-spa-layout/dist/types/browser/constructApplications.d.ts(36,5): error TS2464: A computed property name must be of type 'string', 'number', 'symbol', or 'any'.
[build:*types] node_modules/single-spa-layout/dist/types/isomorphic/constructRoutes.d.ts(74,81): error TS2694: Namespace '"/Users/jason.dielman/bx/codebase/platform-ui-host/node_modules/@types/parse5/index"' has no exported member 'DefaultTreeDocument'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(1,1): error TS6200: Definitions of the following identifiers conflict with those in another file: CustomPropsFn, AppProps, ParcelConfig, ParcelProps, ParcelConfigObject, Parcel, LifeCycleFn, LifeCycles, StartOpts, Application, ActivityFn, Activity, RegisterApplicationConfig, SingleSpaCustomEventDetail, NOT_LOADED, LOADING_SOURCE_CODE, NOT_BOOTSTRAPPED, BOOTSTRAPPING, NOT_MOUNTED, MOUNTING, MOUNTED, UPDATING, UNMOUNTING, UNLOADING, SKIP_BECAUSE_BROKEN, LOAD_ERROR, AppError
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(3,5): error TS2374: Duplicate index signature for type 'string'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(4,5): error TS2374: Duplicate index signature for type 'number'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(98,5): error TS2374: Duplicate index signature for type 'string'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(105,5): error TS2717: Subsequent property declarations must have the same type.  Property '[MOUNTED]' must be of type '[]', but here has type 'string[]'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(106,5): error TS2717: Subsequent property declarations must have the same type.  Property '[NOT_MOUNTED]' must be of type '[]', but here has type 'string[]'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(107,5): error TS2717: Subsequent property declarations must have the same type.  Property '[NOT_LOADED]' must be of type '[]', but here has type 'string[]'.
[build:*types] node_modules/single-spa-layout/node_modules/single-spa/typings/single-spa.d.ts(108,5): error TS2717: Subsequent property declarations must have the same type.  Property '[SKIP_BECAUSE_BROKEN]' must be of type '[]', but here has type 'string[]'.
[build:*types] node_modules/single-spa/typings/single-spa.d.ts(1,1): error TS6200: Definitions of the following identifiers conflict with those in another file: CustomPropsFn, AppProps, ParcelConfig, ParcelProps, ParcelConfigObject, Parcel, LifeCycleFn, LifeCycles, StartOpts, Application, ActivityFn, Activity, RegisterApplicationConfig, SingleSpaCustomEventDetail, NOT_LOADED, LOADING_SOURCE_CODE, NOT_BOOTSTRAPPED, BOOTSTRAPPING, NOT_MOUNTED, MOUNTING, MOUNTED, UPDATING, UNMOUNTING, UNLOADING, SKIP_BECAUSE_BROKEN, LOAD_ERROR, AppError
[build:*types] node_modules/single-spa/typings/single-spa.d.ts(3,5): error TS2374: Duplicate index signature for type 'string'.
[build:*types] node_modules/single-spa/typings/single-spa.d.ts(4,5): error TS2374: Duplicate index signature for type 'number'.
[build:*types] node_modules/single-spa/typings/single-spa.d.ts(139,5): error TS2374: Duplicate index signature for type 'string'.
[build:*types] npm run build:types exited with code 2

Trying to dive into this a bit more, but if anyone has run into this in the meantime any help is very much appreciated 👍

[willvitorino]

I have the same issue, but with "single-spa": "5.9.5" end "single-spa-layout": "1.6.1".

Identified Problem

The error occurred during the execution of the yarn build command, specifically in the build:types step. TypeScript was finding conflicting type definitions for the single-spa package. This happened because there were two versions of the same package in the project:

1. One version in the root of node_modules
2. Another version inside node_modules/single-spa-layout/node_modules/single-spa

These type conflicts caused errors such as:

• Duplicate index signature
• Conflicts in identifier definitions
• Subsequent property declarations with different types

Implemented Solution

I added the skipLibCheck: true option in the TypeScript configuration in the tsconfig.json file. This option instructs TypeScript to ignore type checking in external library definition files (.d.ts files).

This is a common solution for type conflict problems between dependencies, especially when you don't have direct control over third-party libraries.

"compilerOptions": {
    "declarationDir": "dist",
    "skipLibCheck": true
}

Why This Works

The skipLibCheck option makes TypeScript ignore type checking errors in library definition files, allowing the build process to continue even when there are type conflicts between dependencies. This doesn't affect type checking of your own code, only external libraries.

Now the yarn build command is working correctly, compiling both TypeScript files and webpack without errors.

[internettrans]

Does this still occur with [email protected]?