自制含Material UI的npm模块导入失败问题求助

核心排查与修复步骤 #

• 校验package.json入口配置
  检查模块根目录package.json的main字段，必须指向webpack编译后的产物路径（比如"./dist/index.js"），不能指向未编译的源码文件。
• 调整webpack打包配置
  • 设置output.libraryTarget为"umd"或"commonjs2"，保证模块能被Node.js和浏览器环境正确解析。
  • 将React、Material UI等公共依赖排除在打包范围外，在webpack.config.js中添加：

    externals: {
      react: 'react',
      'react-dom': 'react-dom',
      '@mui/material': '@mui/material'
    }
    

  • 重新执行npm run build，确认dist目录生成了正确的打包文件。
• 解决依赖冲突问题
  本地链接的模块和主项目若存在重复的React/Material UI实例，会导致导入异常。在模块目录中执行以下命令，复用主项目的依赖：

  npm link ../你的主项目路径/node_modules/react
  npm link ../你的主项目路径/node_modules/@mui/material
  

• 确认导入语句正确性
  主项目中导入模块时，直接使用模块名，比如：

  import { 你的组件名 } from 'react-templates';
  

  不要使用相对路径去访问node_modules下的链接目录。
• 清理缓存并重启服务
  在主项目中执行npm cache clean --force，然后重启开发服务器，避免缓存导致的加载问题。

内容的提问来源于stack exchange，提问作者Денис Твердоступ