导入自研npm React组件库报错：需配置合适Loader处理文件类型

问题根源 #

报错显示webpack无法解析组件库中的JSX语法（<details>标签），核心问题有两个：

1. 组件库未编译就发布：从报错路径./node_modules/safetyhub-components/src/...能看出，你发布的是未转译的源码，而项目的webpack默认不会处理node_modules目录下的文件，没有配置对应的loader来转译JSX和SCSS。
2. 导入不匹配：你在layout.js中导入AppHeader，但组件库入口文件导出的却是Accordion组件，说明组件导出或导入路径存在错误。

组件库端修复（推荐方案） #

组件库必须编译成通用产物再发布，步骤如下：

• 安装编译依赖：babel-loader、@babel/preset-react、sass-loader、css-loader、webpack。
• 配置webpack：
  • 用babel-loader配合@babel/preset-react转译JSX语法。
  • 用sass-loader+css-loader处理SCSS模块。
  • 将编译产物输出到dist目录。
• 修改package.json：
  • 设置main字段为dist/index.js，指定编译后的入口文件。
  • 添加files字段：["dist", "package.json"]，仅发布编译产物，避免上传源码。
• 重新编译并发布：先执行webpack --mode production生成dist，再运行npm publish更新npm包。

项目端临时调试方案（不推荐） #

如果暂时不想修改组件库，可以让项目webpack处理node_modules中的safetyhub-components：

1. 修改项目webpack配置，添加规则：

   module.exports = {
     module: {
       rules: [
         // 转译组件库的JSX
         {
           test: /\.(js|jsx)$/,
           include: /node_modules\/safetyhub-components/,
           use: {
             loader: 'babel-loader',
             options: { presets: ['@babel/preset-react'] }
           }
         },
         // 处理组件库的SCSS
         {
           test: /\.scss$/,
           include: /node_modules\/safetyhub-components/,
           use: ['style-loader', 'css-loader', 'sass-loader']
         }
       ]
     }
   }
   

2. 修正导入代码：
   • 如果组件库的index.js正确导出了AppHeader，用命名导入：

     import { AppHeader } from "safetyhub-components";
     

   • 如果AppHeader是单独的组件文件，直接导入：

     import AppHeader from "safetyhub-components/src/components/header/Header.js";
     

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