How to resolve RollUp Material-ui "withStyles is not defined"

user_6497678 0
Viewed 792

I try to bundle an external component and loading to my app on runtime. But on loading it throws "withStyles is not defined". Has someone an idea whats missing in my rollup.conf.js?

This is my rollup.conf.js

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    },
    {
      file: pkg.umdModule,
      format: 'umd',
      name: pkg.name
    }
  ],
  plugins: [
    postcss({
      plugins: [],
      minimize: true,
      sourceMap: 'inline'
    }),
    external({
      includeDependencies: true
    }),
    url(),
    svgr(),
    resolve(),
    babel({
      presets: [
        'react-app'
      ],
      plugins: [
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-proposal-optional-chaining',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        'transform-react-remove-prop-types',
        [
          'babel-plugin-import',
          {
            'libraryName': '@material-ui/core',
            // Use "'libraryDirectory': ''," if your bundler does not support ES modules
            'libraryDirectory': 'esm',
            'camel2DashComponentName': false
          },
          'core'
        ]
      ],
      exclude: 'node_modules/**',
      runtimeHelpers: true
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    commonjs(),
    terser()
  ]
}

This is the component which throws "withStyles is not defined"

import React from 'react'
import PropTypes from 'prop-types'
import { DialogTitle as MuiDialogTitle, IconButton, Icon, Typography } from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  }
});

const DialogTitle = ({ children, classes, onClose }) => (
  <MuiDialogTitle>
    {children ? <Typography variant='inherit'>{children}</Typography> : null}
    {onClose ? (
      <IconButton aria-label='close' className={classes.closeButton} onClick={onClose}>
        <Icon name={'close'} />
      </IconButton>
    ) : null}
  </MuiDialogTitle>
);

DialogTitle.propTypes = {
  ...DialogTitle.propTypes,
  onClose: PropTypes.func
};

export default withStyles(styles)(DialogTitle)

Stackoverflow says I should write a lot more text, in case of my code is to long and they think its to less informations. But hope thats enough text for now.

rollupjs rollup reactjs
1 Answers

I think you can update your rollup.config.js with

... 

import commonjs from 'rollup-plugin-commonjs'

...
//rollup.config.js

export default {

...

plugins: [

...

  commonjs({
    include: ['node_modules/**'],
    namedExports: {
      'node_modules/@material-ui/core/styles': ['withStyles']
    }
  })
]

node_modules/@material-ui/core/styles may need to be something different like node_modules/@material-ui/core/index.js, but you should see the path in the error message.

Finding out another (probably better) way is to include @material-ui/core in the external of your rollup.config.js

//rollup.config.js

...

export default {
  input: 'src/index.ts',
  ...
  external: ["@material-ui/core"],

}
user_24182950
Related