Why do I get TS Errors in material/web itself during compilation?

[alexmeier-19]

So I use material-web as a bundled JS library. Because our project is in TypeScript (no modules though) I imported/exported all the js files in my "...d.ts" file like in "all.d.ts". But now the TS compiler follows those paths and find several errors which are true in my opinion. E.g.
TS2415: Class 'Dialog' incorrectly extends base class 'LitElement'. Property 'type' is optional in type 'Dialog' but required in type 'LitElement'.

What do I not understand?

[asyncLiz]

Can you provide more info with your project and build setup, such as a codepen or github repo? I'm not sure what no modules in TypeScript means, and importing .js files from a .d.ts file doesn't sound right.

[alexmeier-19]

Ok, I can't really provide it somewhere, but I'll try to explain. We use TypeScript, but because we have a lot of legacy JS code with global variables etc., we can't use any module system yet. As soon as I type "import" or "export" somewhere, the whole project becomes modulized and I have to do it correctly for thousands of files.
So what we do is to load different libraries as bundled JS files. We also use node or npm only to install TypeScript and ESLint for development and the compilation process.
Ok, now what I've done to make material-web work in our project:

1. I installed material-web somewhere with npm.
2. I bundled it with "rollup" starting from the all.js file.
3. I put the bundled file into our project
4. Now, I want to have material-web's types for development in our project.
5. There is a all.d.ts file in material/web which looks to me exactly the same as all.js. It is just importing and exporting different ".js" files like this. import './button/elevated-button.js';
6. I create a custom 'd.ts.' file in our project, and usually I would put all the "declare class..." statements in there. Such files you can usually download from "definitely typed" for different libraries.
7. But funnily enough, I can also put all the "import/export" statements from your "all.d.ts" file, which looks exactly the same as "all.js" file to me, into my ".d.ts" file without the whole project becoming "modular".
8. if I do so, the types will be correctly recognized in my project. But during the compilation, TypeScript follow those paths and finds the errors I mentioned above.

I also tried to create a bundled "d.ts." file with tools like "tsup". The tool resolves the paths in the "all.d.ts" file and puts all the contents in one file, so I have all the "declare..." statements in one file. But then there are the same errors in this file... My solution is to ignore them with @ts-ignore, but I don't understand why they are there in the first place...?

[asyncLiz]

I think this is the same issue as #5129. It's not very well supported to try and bundle published .d.ts files from an npm module.

It sounds like the way your project is set up, TypeScript is trying to compile node_modules/@material/web/. You could try using skipLibCheck to see if that changes anything.

Otherwise, if you really need to build the project through TypeScript all the way, you can git clone the entire repository rather than using npm install @material/web. That will give you the original TypeScript files to include with your build system, rather than using the pre-built published .js files.

[alexmeier-19]

They are kind of related. skipLibCheck helps, but it's a bad option as it could ignore some other errors during compilation too.

Types aside, what about the error itself? It seems like "type" is actually optional in "Dialog" class and required in "LitElement"?

[asyncLiz]

I'm not sure. LitElement does not have a property called type.

[alexmeier-19]

Ah right. 😅 I must have misread something. Ok now at least the picture is a bit more clear for me. The package you get from npm is precompiled and TypeScript runs in some trouble trying to compile this stuff one more time.
Thank you for clarification and the idea to try to include the source TS code from repo.