在浏览器中将 ReactJS 组件作为脚本导入答案

【问题标题】：Import ReactJS Component in browser as a Script在浏览器中将 ReactJS 组件作为脚本导入
【发布时间】：2017-12-31 23:16:06
【问题描述】：

我在 reactJS 中写了一个渲染树的组件

我无法将其直接导入浏览器并不断收到此错误：

Uncaught Error: Module name "TreeComponent" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:5)
    at Object.o [as require] (require.js:5)
    at requirejs (require.js:5)
    at reactJS_returnReactJs.action:2192

babel 预设是 react-app:

  "babel": {
    "presets": [
      "react-app"
    ]
  },

构建的入口点是 index.js：

export {default} from './components/TreeComponent';

您能帮我找出构建步骤中的问题吗？

【问题讨论】：

您是否尝试通过这样做来导入 TreeComponent：export {default} from './components/TreeComponent';
导出默认 TreeComponent；在 TreeComponent.js

标签： reactjs require exports-loader

【解决方案1】：

如果你以这种方式在 TreeComponent.js 中导出 react 组件

export default TreeComponent({

});

或者类似的东西

exports.default = TreeComponent;

你需要这样导入

import { TreeComponent } from './components/TreeComponent';

或者你也可以这样做

import TreeComponent from './components/TreeComponent/TreeComponent';

【讨论】：

TreeComponent 的最后一条语句是 export 导出默认 TreeComponent；然后我将创建的 main.js 文件添加到浏览器中，但我根本无法在内联脚本中引用它。