Webpack构建成功但React组件无法正常使用，请求技术排查

• 检查组件导出方式
  确认你的TestComponent是默认导出，而非命名导出。示例：
  正确的默认导出写法：

  class TestComponent extends React.Component {
    // 组件逻辑
  }
  export default TestComponent;
  

  如果用的是命名导出（export class TestComponent...），则导入时必须用import { TestComponent } from 'library'，不能用默认导入语法。

• 验证webpack打包配置
  检查webpack.config.js的output.libraryTarget配置，建议设为commonjs2或umd，确保打包后导出的是组件本身而非包裹对象：

  output: {
    filename: 'index.js',
    library: 'TestComponent',
    libraryTarget: 'commonjs2'
  }
  

  同时查看打包后的dist文件，确认入口文件最终导出的是TestComponent，而非嵌套在对象里的属性。

• 核对package.json的main字段
  确保package.json的main字段指向webpack构建后的正确文件路径，比如"main": "dist/index.js"，路径错误会导致导入空对象或无关文件。

• 检查.babelrc配置
  确认babel预设未破坏导出逻辑，React 15.6.2所需的基础配置应为：

  {
    "presets": ["react", "es2015"]
  }
  

  避免使用会篡改默认导出的插件，或错误配置模块转换规则。

• 本地验证组件本身
  在库项目内部创建测试文件，直接导入源文件组件并渲染，确认组件代码无问题：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import TestComponent from './src/TestComponent';
  
  ReactDOM.render(<TestComponent />, document.getElementById('root'));
  

  若测试正常，说明问题出在打包导出环节，而非组件代码本身。

• 清理缓存重构建
  Node.js 9的模块缓存可能保留旧的错误导出，尝试删除库项目的node_modules/.cache（若存在），重新执行webpack构建；在使用该库的项目中，也可清理依赖后重新安装，或用npm install library --force强制更新。

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