TS2694: Namespace '"/node_modules/parse5/dist/index"' has no exported member 'DefaultTreeDocument'.

[cristofersousa]

I'm using single-spa-layout it works perfectly, however when performing the build it returns an error log in the terminal, basically accusing problems regarding the third-party lib found in node_modules.

My dependencies in root-config:

package.json

  "dependencies": {
    "@types/jest": "^27.0.1",
    "@types/systemjs": "^6.1.1",
    "@types/webpack-env": "^1.16.2",
    "single-spa-layout": "^2.1.0"
  },

Log error

$ tsc
$ tsc
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.

36     [name]: Array<AppRoute>;
       ~~~~~~

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'.

36     [name]: Array<AppRoute>;
       ~~~~~~

error TS2694: Namespace '"/node_modules/parse5/dist/index"' has no exported member 'DefaultTreeDocument'.

74 export type RoutesConfig = InputRoutesConfigObject | Element | import('parse5').DefaultTreeDocument | string;
                                                                                   ~~~~~~~~~~~~~~~~~~~

node_modules/single-spa-layout/dist/types/isomorphic/constructRoutes.d.ts:95:63 - error TS2694: Namespace '"/node_modules/parse5/dist/index"' has no exported member 'Element'.

95 export type ContainerEl = string | Element | import('parse5').Element;
                                                                 ~~~~~~~

Found 4 errors in 2 files.

Errors  Files
     2  node_modules/single-spa-layout/dist/types/browser/constructApplications.d.ts:36
     2  node_modules/single-spa-layout/dist/types/isomorphic/constructRoutes.d.ts:74

[cristofersousa]

From what I'm seeing here, the parser5 dependency in version 6.0.1 does not have this property informed, so the error occurs, even when downgrading to previous versions and looking at the parser5 https://github.com/inikulin/parse5/releases/tag/v7.0.0.

https://github.com/single-spa/single-spa-layout/blob/325f6eff46437cf497cf230dde00163667cd4d11/pnpm-lock.yaml#L47

Looking at the issue history as per your observation of installing parse5 types it didn't work either. I must be doing something very wrong, in case you inform that you don't use TS I'm inclined to create a new root-config project without ts, would it be ideal not to go through this kind of problem with third-party lib?

https://github.com/single-spa/single-spa-layout/issues/60#issuecomment-686631296

[cristofersousa]

One of the errors you find about typing:

node_modules/single-spa-layout/dist/types/browser/constructApplications.d.ts

If we type it as shown below, we can already solve two typing problems, however I can't solve the parse5 problem because the DefaultTreeDocument property no longer exists in the informed class.

export type ApplicationMap = {
    [name]: Array<AppRoute>;
};

to

export type ApplicationMap = {
    [name:string]: Array<AppRoute>;
};

Mention to parse5 :

node_modules/single-spa-layout/dist/types/isomorphic/constructRoutes.d.ts

node_modules/single-spa-layout/dist/types/isomorphic/constructRoutes.d.ts:95:63 - error TS2694: Namespace '"/node_modules/parse5/dist/index"' has no exported member 'Element'.

95 export type ContainerEl = string | Element | import('parse5').Element;

[filoxo]

I can help walk through some of this. It seems that this is just TypeScript typings mismatch, but not actually a bug with single-spa-layout.

It appears that parse5's types got updated for v6 here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/48402/files#diff-107d402a30275251354f4d0116a2942b4b0631205531ad5ee46c602108ab1836R111 which explains why DefaultTreeDocument is throwing an error; it was renamed to just Document in v6. We use that type in single-spa-layout here: https://github.com/single-spa/single-spa-layout/blob/6a6eac8ba161c2a93d393616892fa88d6c028294/src/isomorphic/constructRoutes.js#L19 so to validate this locally, you could change that line in your apps' node_modules and see if it compiles (or throws a different error). PR for this fix is welcome!

The error from this screenshot does not have to do with parse5 typings and is separate TypeScript-ism that you could open as a separate issue, for now let's not open another issue.

[joeldenning]

Fix released in https://github.com/single-spa/single-spa-layout/releases/tag/v2.2.0