Как разрешить RollUp Material-ui "withStyles не определен" - PullRequest
Новая
       78

Как разрешить RollUp Material-ui "withStyles не определен"

0 голосов
/ 09 июля 2020

Я пытаюсь связать внешний компонент и загрузить его в свое приложение во время выполнения. Но при загрузке выкидывает "withStyles is not defined". У кого-нибудь есть идея, чего не хватает в моем rollup.conf. js?

Это мой 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()
  ]
}

Это компонент, который бросает "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 говорит, что я должен написать намного больше текста, в случае, если мой код слишком длинный, и они думают, что это меньше информации. Но надеюсь, этого текста пока достаточно.

...