Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4 webpack build error clsx not a function #14513

Closed
2 tasks done
Falieson opened this issue Feb 12, 2019 · 2 comments
Closed
2 tasks done

v4 webpack build error clsx not a function #14513

Falieson opened this issue Feb 12, 2019 · 2 comments
Labels
duplicate This issue or pull request already exists

Comments

@Falieson
Copy link

npm i -S @material-ui/styles@next @material-ui/core@next
> installs 4.0.0-alpha.0

Might be related to
#14152

  • 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 🤔

Trying to render the Paper example w/ the styles/ThemeProvider in 4.0.0

Current Behavior 😯

react-dom.development.js:19779 Uncaught TypeError: clsx__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function
    at Paper (Paper.js:38)
  var className = clsx(classes.root, classes["elevation".concat(elevation)], _defineProperty({}, classes.rounded, !square), classNameProp);
  return React.createElement(Component, _extends({
    className: className,
    ref: ref
  }, other));
});

Steps to Reproduce 🕹

Adding material ui to a project initialized with https://github.com/TGRstack/typescript-graphql-react-app-express

// ThemeProvider.tsx
// DOC: https://material-ui.com/customization/themes/
import * as React from 'react'

import { createMuiTheme } from '@material-ui/core'
import indigo from '@material-ui/core/colors/indigo'
import pink from '@material-ui/core/colors/pink'
import red from '@material-ui/core/colors/red'
import MUIStylesProvider from '@material-ui/styles/ThemeProvider'

// tslint:disable object-literal-sort-keys
const theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: indigo,
    secondary: pink,
    error: red,
    // Used by `getContrastText()` to maximize the contrast between the background and
    // the text.
    contrastThreshold: 3,
    // Used to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.
    tonalOffset: 0.2,
  },
  spacing: 4,
  typography: {
    useNextVariants: true,
  },
})
// tslint:enable object-literal-sort-keys

//  DOC: https://material-ui.com/customization/themes/#muithemeprovider
const ThemeProvider = ({children}: {children: React.ReactChild}) =>  <MUIStylesProvider theme={theme}>
  {children}
</MUIStylesProvider>

export default ThemeProvider
// Home.tsx
import * as React from 'react'
import * as S from './Home.css'
import { Paper } from '_modules/skylo/mui/'
import Logo from './Logo'

function HomeEntrancePage() {
  return (
    <div className={S.container}>
      <Paper />
    </div>
  )
}

export default HomeEntrancePage

Context 🔦

Your Environment 🌎

Tech Version
Material-UI 4.0.0-alpha.0
React 16.8.1
Browser Chrome
TypeScript 3.3.1
etc. 999.999.999
@oliviertassinari oliviertassinari added the duplicate This issue or pull request already exists label Feb 12, 2019
@oliviertassinari
Copy link
Member

It's a duplicate of #14512.

@Falieson
Copy link
Author

Thanks @oliviertassinari

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants