TypeScript issues with @material-ui/styles and @material-ui/core packages

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

Expected Behavior 🤔

When using the new @material-ui/styles and @material-ui/core together in the same project, I can successfully compile the project using the tsc compiler.

Current Behavior 😯

Receiving typescript errors.

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

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

node_modules/@material-ui/core/styles/jssPreset.d.ts:1:10 - error TS2724: Module '"../../../../../../../../myProject/node_modules/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 '"/myProject/node_modules/jss/src/index"' has no exported member 'CreateStyleSheetOptions'.

32   extends JSS.CreateStyleSheetOptions<ClassKey> {
                 ~~~~~~~~~~~~~~~~~~~~~~~

Found 3 errors.

Steps to Reproduce 🕹

I’ve attempted to replicate this in codesandbox and have been unable to. I think the reason for that is that it does not accurately represent a node_modules structure…hard to tell. I believe the core of this issue is we have 2 different versions of JSS in play:

`➜ yarn why jss yarn why v1.12.0 [1/4] 🤔 Why do we have the module “jss”…? [2/4] 🚚 Initialising dependency graph… [3/4] 🔍 Finding dependency… [4/4] 🚡 Calculating file sizes… => Found “jss@10.0.0-alpha.8” info Reasons this module exists

• “project#@material-ui#styles” depends on it
• Hoisted from “project#@material-ui#styles#jss” info Disk size without dependencies: “180MB” info Disk size with unique dependencies: “896MB” info Disk size with transitive dependencies: “916MB” info Number of shared dependencies: 5 => Found “@material-ui/core#jss@9.8.7” info This module exists because “project#@material-ui#core” depends on it. info Disk size without dependencies: “408MB” info Disk size with unique dependencies: “544MB” info Disk size with transitive dependencies: “632MB” info Number of shared dependencies: 5 `

I believe since core uses one version and styles another, combined with the install() mechanism at runtime (which TypeScript presumably cant know about since its runtime), its impossible to the new styles package alongside core.

To trigger the error, you can try to compile a file with imports like this:

import React, { FC } from 'react'
import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles'
import createMuiTheme from '@material-ui/core/styles/createMuiTheme'

interface Props {
  children: any
  theme: any
  /** The theme to apply to all children. */
}

const ThemeProvider: FC<Props> = props => {
  return (
    <MuiThemeProvider theme={createMuiTheme(props.theme)}>
      {props.children}
    </MuiThemeProvider>
  )
}

export default ThemeProvider

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.9.0
React	v16.7.0
Browser	N/A
TypeScript	v3.2.2

[eps1lon]

What is working for me is moving node_modules/@types/jss (which is the version for v9) to node_modules/@material-ui/core/node_modules/@types/jss. This way Typescript will correctly use the v9 typings for @material-ui/core and the v10 typings for @material-ui/styles.

You could do this with e.g. a postinstall entry in your package.json (unix only):

"postinstall": "mkdir -p node_modules/@material-ui/core/node_modules/@types/jss && cp -r node_modules/@types/jss node_modules/@material-ui/core/node_modules/@types"

Be aware that this is heavily dependent on the package manager you use (and the node_modules/ layout).

[lmachens]

If someone needs a node solution for the workaround:

jss-types-workaround.js

const fs = require('fs');
const path = require('path');

const copyFolderSync = (from, to) => {
  fs.mkdirSync(to, { recursive: true });
  fs.readdirSync(from).forEach(element => {
    if (fs.lstatSync(path.join(from, element)).isFile()) {
      fs.copyFileSync(path.join(from, element), path.join(to, element));
    } else {
      copyFolderSync(path.join(from, element), path.join(to, element));
    }
  });
};

copyFolderSync('node_modules/@types/jss', 'node_modules/@material-ui/core/node_modules/@types/jss');

package.json

"scripts": {
  "postinstall": "node jss-types-workaround"
}