如何解决RollUp Material-用户界面“未定义样式”

Question

我尝试捆绑一个外部组件，并在运行时加载到我的应用程序。但在加载时，它抛出了“未定义的样式”。有人知道我的汇总中缺少了什么。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()
  ]
}

这是抛出“未定义样式”的组件

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说我应该写更多的文本，以防我的代码太长，他们认为它的信息太少。但希望现在这是足够的文本。

Answer 1

我想你可以更新你的rollup.config.js

... 

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/style可能需要与node_modules/@material ui/core/index不同。js，但您应该可以在错误消息中看到路径。

找到另一种（可能更好）方法是在汇总的外部中包含@material ui/core。配置。js

//rollup.config.js

...

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

}