导入生成的JS模块出错，求Babel基本配置及React报错解决

首先，咱们先搞定你遇到的「React.createElement: type is invalid — expected a string」错误，这个问题大概率和组件的导入导出方式不匹配有关，再结合你的Babel配置和React版本来调整。

一、错误根源排查 #

你的Test组件用的是默认导出：

import React from 'react'
export default class Test extends React.Component { 
  render() { 
    return <h2>test</h2> 
  } 
}

如果导入的时候用了命名导入（加花括号）：

import { Test } from './Test' // 错误！

就会导致Test是undefined，React尝试创建元素时收到的类型不对，自然抛出那个错误。正确的导入方式应该是默认导入：

import Test from './Test' // 正确

二、你的.babelrc配置调整建议 #

针对React 15.6.1（搭配Babel 6.x版本），你的基础配置没问题，但可以做一点优化，避免模块转译冲突：

{
  "presets": [
    ["es2015", { "modules": false }], // 禁用ES模块转成CommonJS，让Webpack自己处理模块树摇
    "react"
  ],
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

为什么加"modules": false？ #

• es2015预设默认会把ES模块（import/export）转成CommonJS的require，而Webpack本身对ES模块的处理更高效，能做更好的树摇优化，同时避免潜在的模块导出格式冲突。

三、确保依赖包安装正确 #

你需要确认已经安装了Babel 6对应的所有依赖（因为React 15.6.1不兼容较新的Babel 7+），执行以下命令安装：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-plugin-transform-class-properties

四、Webpack配置补充检查 #

还要确保Webpack能正确识别.jsx文件并使用babel-loader处理：
在Webpack配置的module.rules里添加：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

这样Webpack才会把你的React代码交给Babel转译。

总结 #

先检查组件导入方式是否正确（默认导出对应默认导入），再调整Babel配置里的模块设置，最后确认依赖和Webpack配置无误，应该就能解决这个错误了。

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