在 React 组件导出/导入中查找错误答案

【问题标题】：Looking for errors in a React component export/import在 React 组件导出/导入中查找错误
【发布时间】：2018-04-14 01:40:46
【问题描述】：

我是 React 堆栈的新手，正在尝试构建一个简单的共享组件库。这些组件在他们的家庭项目中工作正常。我已经使用this 建议配置了它们。将它们放入本地 git，npm 使用 git+https 为它们安装了一个新项目。组件按预期显示在新项目 /node_modules/.../lib 中。

当以下运行时，我最终得到未定义的导出：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NeonFooter = exports.default = undefined;

var _NeonFooter = require('./components/NeonFooter');
var _NeonMenu = require('./components/NeonMenu');

exports.default = _NeonMenu.NeonMenu;
exports.NeonFooter = _NeonFooter.NeonFooter;

进入 chrome 的调试器并使用一些控制台语句，（例如）_NeonFooter 确实显示为 _esModule，并且在范围内具有到 NeonFooter.js 文件的正确路径闭包。但是，没有直接的 _NeonFooter.NeonFooter 字段。当 _NeonFooter.NeonFooter 被引用时，它出现未定义。

我似乎无法让 vscode 调试器或 chrome 绑定到 require 上的断点，并且没有异常发生中断。如何进一步深入研究以找到导致未定义值的实际错误？

【问题讨论】：

你试过使用调试器吗？源中的关键字？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
谢谢，这很有用。看起来我的模块正在加载到 installedModules 缓存中，但没有填充导出。这应该足够了。

标签： reactjs debugging webpack babeljs require

【解决方案1】：

因此，问题似乎在于 Babel 转换，或者 React 如何使用该转换。将转换后的代码更改为

exports.NeonMenu = _NeonMenu.default;
exports.NeonFooter = _NeonFooter.default;

解决问题。

仍在尝试确定正确的 Babel/React 行为，但这是一个进步。

【讨论】：