使用Rollup打包项目运行时报错makeStyles is not a function如何解决

报错产生原因 #

• Rollup的commonjs转换插件没有正确识别@material-ui/styles的命名导出，将makeStyles方法挂载到了模块的default属性下，导致命名导入拿到的对象里没有对应方法。
• 你使用的Material UI核心包和@material-ui/styles包版本不匹配，Material UI v5版本已经废弃了@material-ui/styles包，将makeStyles迁移到了@mui/styles下，混用v4和v5版本的依赖会出现方法找不到的问题。
• Rollup配置中将@material-ui/styles标记为了外部依赖，但是运行环境中没有引入对应依赖，或者引入的依赖版本不对。

修复方案 #

调整Rollup commonjs插件配置 #

在rollup.config.js中给@rollup/plugin-commonjs添加命名导出声明：

import commonjs from '@rollup/plugin-commonjs';

export default {
  // 其余配置保持不变
  plugins: [
    commonjs({
      namedExports: {
        '@material-ui/styles': ['makeStyles']
      }
    })
  ]
}

调整导入语句写法 #

将命名导入改为默认导入后解构，适配commonjs转换后的导出结构：

import MaterialUIStyles from '@material-ui/styles';
const { makeStyles } = MaterialUIStyles;

const styles = makeStyles({
    subHeading:{
        fontSize:'14px',
        fontFamily: "Open Sans"
    }
});

校验依赖版本匹配 #

如果使用的是Material UI v4，确保所有@material-ui/开头的依赖版本号一致；如果使用的是Material UI v5，卸载@material-ui/styles，安装@mui/styles以及配套依赖：

npm install @mui/styles @emotion/react @emotion/styled

同时修改导入语句：

import { makeStyles } from '@mui/styles';

修正external配置 #

如果Rollup配置中external字段包含@material-ui/styles，要么移除该配置让Rollup将依赖打包进最终产物，要么确保运行环境中已经正确引入了对应版本的@material-ui/styles依赖。

内容的提问来源于stack exchange，提问作者kapil shanaz