Material-ui: Could not find a declaration file for module 'react-jss/lib/jss'.

[msanfilippof]

EDIT: I'm using typescript.

Hello, even if I already googled it, I'm not able to solve it.

Could not find a declaration file for module 'react-jss/lib/jss'.

Try `npm install @types/react-jss` if it exists or add a new declaration (.d.ts) 
file containing `declare module 'react-jss';`

I know is potentially an issue with JSS and not MUI, but has someone solved this?

Thanks.

[Fingasss]

Have the same problem. One way I'm used: const Jss = require('react-jss/lib/jss');
Btw, I'm not sure that this will help.

[msanfilippof]

I'm using typescript with imports instead of require...
The problem is not how do you import it, but the type definition absence.

[eps1lon]

I always considered importing from lib or dist or basically anything other than top level files to be bad practice. They do help tree shaking but if the publisher considers them private you have no guarantee that your package won't break on the next patch.

Imports from react-jss/lib/* are currently scattered throughout the repo. Most of them can be transformed to imports from top level but the withStyles implementation relies on some internals.

Maybe we should open an issue over at react-jss and ask if they consider those imports save across minor version bumps and then work on proper ts definitions over at DefinitelyTyped.

For now you have to @ts-ignore or require those imports until typings are provided for that package.

[msanfilippof]

@eps1lon Thanks Sebastian, the // @ts-ignore for now is temporary fixing my problem. Again, is a TypeScript problem about types, not about functionality. I'll open a ticket in React-JSS repo.

[pelotom]

Is it safe to close this? Seems like not a MUI issue...

[eps1lon]

I'll have definitions for react-jss working locally. There are currently two other updates (DefinitelyTyped/DefinitelyTyped#28319 and DefinitelyTyped/DefinitelyTyped#28315) that need to be approved before they can work. Once the react-jss typings are accepted I will ping op.

For now there is nothing else for us to do. Our example at examples/create-react-app-with-typescript uses declare module 'react-jss/*'; as an alternative to @ts-ignore.

[oliviertassinari]

@pelotom @eps1lon Regarding react-jss. I think that we should remove the dependency from the project in the near future. They are working on releasing a new version that prevents accessing the lib folder, no more tree shaking. We are only using the dependency for sharing the context constants. So far, here is my upgrade plan for the styling solution, I hope to complete it within September:

• Upgrade to the new React context API
• remove react-jss dependency
• use a tuned WithStyleProvider for Material-UI use cases (replacement of JssProvider)
• add support for style as a function (*)

It would be a breaking change. But I guess it's fine since we trade it for a great new feature (*). That will unlock building utilities components like there is in styled-system. At least, it's a roadmap I want to push forward for the end of the year.

What do you think?

[pelotom]

@oliviertassinari I'm not sure what exactly this entails:

• add support for style as a function (*)

but otherwise this sounds like a great plan to me.

[eps1lon]

I'm not familiar with your styling solution so I can't judge if a complete switch is warranted. Would be nice to have a clear view how react-jss compares to this solution here. Maybe there is an argument to be had to do the opposite and switch completely to react-jss.

I agree however that something should be done because the lib/* are not supported.

[msanfilippof]

the // @ts-ignore for now is temporary fixing my problem. Feel free to re-open if needed.

[oliviertassinari]

I'm not sure what exactly this entails:

@pelotom I'm referring to supporting #7633.

Would be nice to have a clear view how react-jss compares to this solution here.

@eps1lon There are some key differences. Theming, we have a custom theme.overrides.x and theme.props.x feature. Bug, I have been fixing many bugs I encountered when trying to start with react-jss here, ranking from memory leaks, broken runtime, HMR, broken nesting, etc. In the end, I also made a different architectural choice regarding the styles deduplication handling. react-jss is not taking off in comparison to styled-components, emotion or glamor. I think that react-jss position here is biased by the dependency we have, you can cut 85% to get the real life usage. So there is x14 more people using styled components than react-jss, an order of magnitude. My reflection on the topic has changed over last few months. Going forward I see two alternatives with potential:

1. We stick to our custom solution, we push it further.
2. We give up, and move to what the React community has elected as a standard. Bootstrap started with LESS, moved to SASS and are now exploring PostCSS. A parallel can be made with us. While I don't think that styled-components raw API is an option for us, maybe there are others.

[eps1lon]

Definitions for react-jss were added in DefinitelyTyped/DefinitelyTyped#28963. Adding @types/react-jss should be used instead of @ts-ignore. If there are any issues with the definitions please open an issue over at DefinitelyTyped.