Rmwc: Missing TypeScript definitions for dependencies

[dawsonc623]

• What RMWC Version are you using [major.minor.patch]: 6.0.12

• Name your build system [Webpack, Rollup...]: Webpack

• Describe the bug with as much detail as possible:

This is a weird one. For some reason, I am getting a couple of errors related to third-party type definitions:

ERROR in [at-loader] ./node_modules/@rmwc/base/dist/utils/data-table-context.d.ts:2:23 
    TS2688: Cannot find type definition file for '@emotion/core'.

ERROR in [at-loader] ./node_modules/@rmwc/base/dist/foundation-component.d.ts:2:23 
    TS2688: Cannot find type definition file for '@emotion/core'.

ERROR in [at-loader] ./node_modules/@rmwc/base/dist/index.d.ts:2:39 
    TS7016: Could not find a declaration file for module 'classnames'. '/home/dawsonc623/projects/elyctech/sword-of/packages/sword-of-editor/node_modules/classnames/index.js' implicitly has an 'any' type.
  Try `npm install @types/classnames` if it exists or add a new declaration (.d.ts) file containing `declare module 'classnames';`

This is the first time I have seen a type issue come up with third-party types, so I am kind of at a loss for how to help on this one. This is occurring on my Sword Of project again: https://github.com/elyctech/sword-of/tree/problematic-code

If you need to get the project running:

git clone https://github.com/elyctech/sword-of -b problematic-code
cd sword-of/packages/sword-of-engine
yarn
yarn build
yarn link
cd ../sword-of-editor
yarn
yarn link sword-of-engine
yarn start-dev

webpack-dev-server will run on http://localhost:8080 (technically http://0.0.0.0:8080, but localhost is the easiest way to get to it).

Note: There were a couple of unrelated build issues that for whatever reason did not present themselves until I did a fresh pull of the repository. Sorry if you tried to look at this branch before and could not get it running. I tested these steps, so I know they work from a fresh installation.

• What happened, and what was supposed to happen:

The build failed with the above errors. It should have succeeded. I am not sure why it failed though, so I cannot provide much more insight. I will keep digging and see what I can find on my end.

[jamesmfriedman]

I’ve never seen this either. RMWC doesn’t use anything related to @emotion so I don’t have a clue as to what that might be.

I know we’ve fixed what could be considered some legitimate issues on this so far, but now I’m thinking you have a problem in your tsconfig.

I can look at this later, but some things that could be causing the issue

• you’re not using “includes” to specify your src directory (which excludes node modules)
• there are several settings related to strict checks of dependencies that should be disabled.

[dawsonc623]

@emotion/core shows up in your dist/foundation-component.d.ts file and your dist/utils/data-table-context.d.ts in @rmwc/base:

/// <reference types="react" />
/// <reference types="@emotion/core" />
...

Line 2 in those files. Now, how they got there is a complete mystery to me, since your project does not reference that library - nor does mine.

As for the classnames issue, I am not entirely sure about this, but since you are exposing classnames in your .d.ts files, you might need to have @types/classnames as a regular dependency instead of a devDependency since your users will need those types. I am not 100% certain that is how it works, but it makes sense intuitively.

I should note that if I install both packages locally these issues go away, so I do not think it has anything to do with my TypeScript settings. It seems like a dependency management issue.

[jamesmfriedman]

Took a moment to pull this down and it works just fine.

So next question, what version of Typescript are you using?

[dawsonc623]

Iiiiiinteresting. I am using the version of TypeScript in the project: 3.7.5. I have everything set up to go through node_modules/.bin instead of global installations (or at least it _should_ be set up that way). I do not have a global installation of TypeScript, Webpack, or any of those tools, so in theory our TypeScript environments match perfectly.

I am not sure what my system did that modified your type files after installation; I did not know that was even possible.

[jamesmfriedman]

Well, maybe not

"typescript": "^3.7.5",

That installs the latest minor version of TS, so I'm technically using 3.8.3. But yeah, followed your directions exactly, no build issues. Running on a Mac, latest yarn.

[dawsonc623]

The lock file should lock down to 3.7.5, I think. You should be able to run node_modules/.bin/tsc --version to make sure. I will force mine to update and see if that helps at all.

Feel free to close this issue, since it seems like it is my environment. I will keep fiddling around and report back if I manage to figure it out, just in case someone else stumbles upon this problem.

[jamesmfriedman]

I appreciate the back and forth. The original issues were potentially real problems. The problem identified a very long flattened union that TS could possibly complain about, but it shouldn't have been a build breaker.

As far as the @emotion/core thing, check out how bizarre this is.

Importing createContext directly causes the d.ts file to randomly include @emotion/core. I double checked with npm ls, storybook is the only one including the dependency. I have NO idea how this would even happen, though it seems like a possible but in Typescript.

Here is is with doing an import from React directly, generates the declaration fine.

I'll put out a patch release for that. Otherwise, the classnames type issue doesn't make sense, it is included as a dev dependency. I'm not sure if yarn installs dev deps automatically.

Update: I moved it to be a regular dependency anyways to see if that helps. Theres not a great argument for it to be in devDependencies since technically hyperform, mutation-observer, and @rmwc/types are all build time deps anyways.

[jamesmfriedman]

@dawsonc623 pushed a patch release, give that a shot

[dawsonc623]

@jamesmfriedman Two of the three errors are gone now. The second @emotion/core error remains:

ERROR in [at-loader] ./node_modules/@rmwc/base/dist/foundation-component.d.ts:2:23 
    TS2688: Cannot find type definition file for '@emotion/core'.

I think you just need to do what you did with data tables to the foundation component, if you did not already. If you did do it, then I have no idea what is going on.

I have not the faintest idea why including createContext directly would add @emotion/core; that definitely looks like a TypeScript bug.

Thanks for working through this and getting back to it so quickly.

[jamesmfriedman]

Definitely same issue, caused by not explicitly importing React. Will do a quick audit of the codebase to make sure this isn't happening anywhere else.

import { useEffect, useState, useRef, useMemo } from 'react';

[jamesmfriedman]

Well, definitely want to say thank you for helping me uncover one of the strangest things I've seen in a long long time.

I can definitely confirm that Typescript is picking the wrong dependencies when generating the declarations. I think this stems from the fact that I have storybook installed at the same location that I build the project from which leads to some dependencies in the tree that it can't reconcile.

I went through and audited the code base and employed a variety of fixes to make sure the generated declarations look correct and don't include @emotion/core (there were LOTS of them).

Patch release put out, please verify and let me know what you see.

[dawsonc623]

Got a successful build!

Is that an error that should be reported to Microsoft? I am not sure about the details, but it seems like TypeScript is doing something it should not be doing for some reason.

Anyway, hopefully we will not see any weird ones like this again. Good work figuring out the underlying issue.

[jamesmfriedman]

I don't even know how I would report this. I've done some diligence trying to find out how typescript generates declaration files before but the only thing you can do is sift through code.

I'm happy enough to just call this one fixed. Good luck on your project, sounds cool! Let me know if anything else pops up, but otherwise this stuff should "just work"

[bjarkehs]

@jamesmfriedman I seem to still get this for @rmwc/toggleable

Are you able to have a look?

[gugu]

@emotion/core was removed recently, I think we can remove this line