Material-ui: v3.8.2 issue with @types/jss

[benneq]

Compile error:

ERROR in node_modules/@material-ui/core/styles/createGenerateClassName.d.ts(1,10):
TS2305: Module '"node_modules/@types/jss"' has no exported member 'GenerateId'.
ERROR in node_modules/@material-ui/core/styles/jssPreset.d.ts(1,10):
TS2724: Module '"node_modules/@types/jss"' has no exported member 'JssOptions'. Did you mean 'JSSOptions'?
ERROR in node_modules/@material-ui/core/styles/withStyles.d.ts(31,48):
TS2694: Namespace '"node_modules/@types/jss/index"' has no exported member 'StyleSheetFactoryOptions'.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

No errors

Current Behavior 😯

Errors

Steps to Reproduce 🕹

Link:

1. update package.json to "@material-ui/core": "3.8.1"
2. rm -rf node_modules package-lock.json
3. npm i
4. npm start

Context 🔦

I just upgraded from 3.7.1 to 3.8.1. I have no entry for jss nor @types/jss in my package.json.

The only entries for @types/jss in my package-lock.json:

"@material-ui/core": {
  "version": "3.8.1",
  "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.8.1.tgz",
  "integrity": "sha512-YhVanMT+DBaw8te6WbpU+RGm/wPYwT2FXlz0JGEexSOReDK3zVuyQJ7mTyDEE+HZQH6p1s6CTXXIH4CoivpogQ==",
  "requires": {
    "@babel/runtime": "7.2.0",
    "@material-ui/system": "^3.0.0-alpha.0",
    "@material-ui/utils": "^3.0.0-alpha.2",
    "@types/jss": "^9.5.6",
    "@types/react-transition-group": "^2.0.8",
    "brcast": "^3.0.1",
    ...



"@types/jss": {
  "version": "9.5.7",
  "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz",
  "integrity": "sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==",
  "requires": {
    "csstype": "^2.0.0",
    "indefinite-observable": "^1.0.1"
  }
},

EDIT Happens with @types/jss 9.5.6 and 9.5.7

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.8.1 |
| React | 16.7.0 |
| Browser | Chrome 71.0 |
| TypeScript | 3.2.2 |
| etc. | |

[oliviertassinari]

@benneq Do you have a minimal code snippet to share? It would help :).

cc @eps1lon, ok I might have to revisit the JSS version isolation. It's related to #14006.

[benneq]

In the meantime I switched back to 3.7.1 and the errors are gone.

Providing a sample seems difficult.. I just set up a completely new project and have no errors:

npx create-react-app mui --typescript
npm i --save @material-ui/core @material-ui/icons
npm i --save @date-io/moment moment material-ui-pickers

I'm not sure which part / component causes the error. But I'll try to add some more code and hopefully encounter the error again.

EDIT: I had a single occurrence of createStyles and withStyles in my code. I removed it. Error is still there.

The search goes on.

EDIT2: MuiThemeProvider wasn't the problem either.

EDIT3: Removed all inline styles. Still the same error.

I have no clue what I should be looking for 😢

[HenrikBechmann]

I get the same problem with 3.8.1

[cmfcmf]

This happens in my project too. I appear to still have the old version of jss installed after the upgrade to @material-ui/[email protected].

yarn list --pattern "jss|@material-ui"
yarn list v1.12.3
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected] # <--- Should be ^10.0.0-alpha.3 after https://github.com/mui-org/material-ui/pull/14006
Done in 0.81s.

I noticed that the package.json file of @material-ui/core requires the older version, maybe that is the issue?
https://github.com/mui-org/material-ui/blob/e1a4a46a58b8d83adac50dc3b50053bf92fc37be/packages/material-ui/package.json#L51-L57

Compared to @material-ui/styles:
https://github.com/mui-org/material-ui/blob/e1a4a46a58b8d83adac50dc3b50053bf92fc37be/packages/material-ui-styles/package.json#L44-L51

[benneq]

@cmfcmf @oliviertassinari At first I thought, that this can't fix the problem, because it's not related to @types/jss. Now I gave it a try, and it works!

I just added "jss": "^10.0.0-alpha.3" to my package.json and set @material-ui/core to 3.8.1 and it works!

Then I removed jss from my package.json (and kept @material-ui/core at 3.8.1). Error is back.

Between each step I did rm -rf node_modules package-lock.json && npm i. Just to be sure ;)

[rosskevin]

Problem is several things:

• jss brought types in-repo but has no tests, they also did not start with @jss/types so there is no guaranteed compatibility https://github.com/cssinjs/jss/issues/964
• In material-ui runtime dependencies, we have:

    "@types/jss": "^9.5.6",
    "jss": "^9.8.7",

• In the root package.json we have:

  "resolutions": {
    "jss": "^10.0.0-alpha.3"
  },

• The repo runs with, depends on, and uses the 10.x types
• In createGenerateClasseName.d.ts and jssPreset.d.ts and withStyles.d.ts it is coded with the 10.0.0-alpha.3 types

So, our package.json is telling downstream users to use 9.x with @types/jss when the testing etc of the monorepo is reliant on 10.x.alpha.3

[rosskevin]

@oliviertassinari I see you added the resolutions line in the root package.json - any reason that was added there instead of updated in the packages themselves?

[rosskevin]

Potential solution in #14048:

1. remove @types/jss from all package.json files
2. remove jss from resolutions
3. update jss in the package.json files to 10.alpha.x
4. clean node_modules && test && release

But...

I mention in https://github.com/mui-org/material-ui/pull/14048#issuecomment-450688831 that we should not merge this PR if we aren't intending to release on a jss alpha, which perhaps is a bad idea anyway - but not sure of @oliviertassinari's performance research in this area.

Options:

1. So, if intent is to be on jss alpha build issues (seemingly unrelated) need fixed in the PR and we need to move PR #14048 forward.
2. If we want to stay on 9.x, we need to PR something new and fix/revert the type changes in createGenerateClasseName.d.ts and jssPreset.d.ts and withStyles.d.ts

I think option 2 is the only way after thinking about it, I have closed my PR.

[joshwooding]

Sorry, ignore the reference mistype

[rajveerpurohit]

Hi @benneq @rosskevin @oliviertassinari

I have been trying to update the material UI version used in my project from 1.4.3 to 3.8.1.

As discussed above, I had similar compiling issues with @types/jss.

I was able to resolve the compile errors with steps suggested by @benneq (https://github.com/mui-org/material-ui/issues/14040#issuecomment-450654382)

Apart from this, I am facing another typescript error mentioned below which is coming up when I try and build the project.

error TS2370: A rest parameter must be of an array type.

Similar issue mentioned here :- https://github.com/goemen/react-material-ui-typescript/issues/1

Any help, appriciated thanks !!

[benneq]

Upgraded to version 3.8.2 and still have the same issue.

ERROR in node_modules/@material-ui/core/styles/createGenerateClassName.d.ts(1,10):
TS2305: Module '"node_modules/@types/jss"' has no exported member 'GenerateId'.
ERROR in node_modules/@material-ui/core/styles/jssPreset.d.ts(1,10):
TS2724: Module '"node_modules/@types/jss"' has no exported member 'JssOptions'. Did you mean 'JSSOptions'?
ERROR in node_modules/@material-ui/core/styles/withStyles.d.ts(31,48):
TS2694: Namespace '"node_modules/@types/jss/index"' has no exported member 'StyleSheetFactoryOptions'.

I'll adjust the title of this issue to version 3.8.2

[KharamanV]

Just install jss package as jss@next

[eps1lon]

@KharamanV This is a bad idea if you're just using @material-ui/core and no @material-ui/styles. jss@10 is only used in @material-ui/styles while jss@9 is used in @material-ui/core.

[oliviertassinari]

The fix will be released in @material-ui/[email protected]. In the meantime, you can stay on 3.7.1.

[MikeAski]

@oliviertassinari Any ETA for @material-ui/corev3.8.3?

[oliviertassinari]

@MikeAski I was planing it for this weekend. But:

So I think that it's better do it sooner, this evening or tomorrow morning.

[oliviertassinari]

v3.8.3 is live. It should be good now.

[HenrikBechmann]

Yup. Just installed, recompiled. Using latest typescript, react, material-ui.

No errors.

Thanks!!!

[ghalex]

This error shows again in 3.9.0

[benneq]

Exactly the same?
I don't get this error for 3.8.3 and 3.9.0

[ghalex]

Yes, I just used react-create-app and install v3.9.0. I works fine if I downgrade to 3.8.3

[HenrikBechmann]

I just installed v. 3.9.0, and compiled without error.

[rosskevin]

I have also confirmed that 3.9.0 is working fine. Perhaps do a clean build or use a command like yarn why jss if you are having issues/finding the alpha of jss in your node_modules.

[samuelrego]

Hi, I am using @material-ui/core 3.9.1 version. I am still getting below exception. I completely deleted the node module s and package.lock.json file still same issue.
even i tried with 3.8.1 still no luck.

node_modules/@material-ui/core/styles/createGenerateClassName.d.ts:1:10 - error TS2305: Module '"../../../jss/src"' has no exported member 'GenerateClassName'.

1 import { GenerateClassName } from 'jss';
           ~~~~~~~~~~~~~~~~~

node_modules/@material-ui/core/styles/jssPreset.d.ts:1:10 - error TS2724: Module '"../../../jss/src"' has no exported member 'JSSOptions'. Did you mean 'JssOptions'?

1 import { JSSOptions } from 'jss';
           ~~~~~~~~~~

node_modules/@material-ui/core/styles/withStyles.d.ts:32:15 - error TS2694: Namespace '"E:/kredifi/frontend/kredifi-ui-themes/node_modules/jss/src/index"' has no exported member 'CreateStyleSheetOptions'.

32   extends JSS.CreateStyleSheetOptions<ClassKey> {

[benneq]

@samuelrego version 3.8.1 and 3.8.2 have this error. 3.8.3 should work fine.

Can you try to delete node_modules folder and package-lock.json file. And then run npm i to reinstall / regenerate all dependencies?

[samuelrego]

@benneq thanks, got resolved.

[timfullert]

Hi, not sure if this is the right place to add but I got a pretty similar issue while starting storybook using awesome-typescript-loader.
So far, I’ve testet @material-ui/core (3.9.1, 3.8.3) with @material-ui/styles (3.0.0-alpha.9, 3.0.0-alpha.10) and jss (10.0.0-alpha.9, 10.0.0-alpha.3) which lead, no matter what combination, to the same error:

ERROR in [at-loader] ./node_modules/@material-ui/core/styles/createGenerateClassName.d.ts:1:10 
    TS2305: Module '"node_modules/jss/src"' has no exported member 'GenerateClassName'.

ERROR in [at-loader] ./node_modules/@material-ui/core/styles/withStyles.d.ts:32:15 
    TS2694: Namespace '"node_modules/jss/src/index"' has no exported member 'CreateStyleSheetOptions'.

ERROR in [at-loader] ./node_modules/@material-ui/core/styles/jssPreset.d.ts:1:10 
    TS2724: Module ‘”node_modules/jss/src"' has no exported member 'JSSOptions'. Did you mean 'JssOptions'?

[skalma]

Had similar issue when upgrading to v3.9.2. I downgraded jss to:
"@types/jss": "^9.5.6",
"jss": "9.8.7",
in my package.json. Then deleted node_modules folder and package-lock.json files (i had two, one in clientapp folder and one in project root folder) and reinstalled (npm i). Errors gone.

[VincentLanglet]

@oliviertassinari @rosskevin Hi !

It came back for v4: https://github.com/mui-org/material-ui/issues/14608

[TidyIQ]

I believe I have a related issue - see https://github.com/mui-org/material-ui/issues/15396

[gespiton]

for anyone stumbles upon this, check out this TypeScript issues with @material-ui/styles and @material-ui/core packages it solved my problem

[williammetcalf]

I am seeing this issue suddenly after updating to MaterialUI 4.0:

ERROR in /.../node_modules/@material-ui/core/styles/withStyles.d.ts(31,48):
[0] TS2694: Namespace '"/.../node_modules/@types/jss/index"' has no exported member 'StyleSheetFactoryOptions'.

in my package.json:

"@material-ui/core": "^4.0.1",
"@material-ui/icons": "^4.0.1",
"@material-ui/styles": "^4.0.1",
"react-jss": "^8.6.1",

[oliviertassinari]

@williammetcalf Can you remove react-jss or upgrade it?

[williammetcalf]

@williammetcalf Can you remove react-jss or upgrade it?

At a quick glance that seems to have fixed the issue, but to test it I just removed all of the jss stuff we had.