Reactjs “如何解决汇总物料界面”；未定义withStyles“；

我尝试捆绑一个外部组件并在运行时加载到我的应用程序。但在加载时，它抛出“未定义withStyles”。有人知道我的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”的组件

从“React”导入React
从“道具类型”导入道具类型
从“@material ui/core”导入{DialogTitle作为MuiDialogTitle、IconButton、Icon、排版}
从“@material ui/core/styles”导入{withStyles}”
常量样式=主题=>({
关闭按钮：{
位置：'绝对'，
右：主题。间距（1），
顶部：主题。间距（1），
颜色：主题。调色板。灰色[500]
}
});
const DialogTitle=（{children，class，onClose}）=>(
{children？{children}:null}
{onClose(
)：null}
);
DialogTitle.propTypes={
…DialogTitle.propTypes，
onClose:PropTypes.func
};
导出默认样式（样式）（对话框标题）

---

Stackoverflow说我应该写更多的文本，以防我的代码太长，他们认为信息太少。但是希望现在的文本足够了。

我想你可以用

... 

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

可能需要与

node_modules/@material ui/core/index.js不同，但您应该在错误消息中看到路径


找到另一种（可能更好）方法是在rollup.config.js的
外部
中包含
@material ui/core

//rollup.config.js

...

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

}

你有没有想过？我对材质ui组件也有同样的问题。
//rollup.config.js

...

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

}