Question

我是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上的断点，并且没有异常发生中断。如何进一步深入研究导致未定义值的实际错误？

Answer 1

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

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

解决了这个问题。

仍在尝试确定正确的Babel / React行为，但这是向前迈出的一步。

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

1 个答案: