SyntaxError:只有在Gatsbyjs博客中试图导入office-ui-fabric时，导出声明才可能出现在模块的顶层。

Question

我正在尝试使用gatsby在博客构建中添加OfficeUI fabric组件。

一旦我导入任何组件，站点就会停止工作。

使用develop命令，我可以在浏览器控制台中看到：SyntaxError: export declarations may only appear at top level of a module

怎么解决这个问题？(我对节点开发非常陌生)。

我做过的搜索显示了babel没有使用es2015预置的问题。但是，我反复检查了一下，.babelrc文件提到了这个预设。

下面是我所做的全部操作(如果有关系的话，在Windows10 x64上)：

1. 克隆了gatsby-starter blog-no- the回购： gatsby.cmd新https://github.com/noahg/gatsby-starter-blog-no-styles光盘安装 喝杯咖啡(很快就会转到纱线上)
2. 检查是否有效 盖茨比发展 打开浏览器(http://localhost:8000)。好的
3. 添加了office组件 npm安装-保存office-ui-fabric-react 重新启动盖茨比开发。仍在工作
4. 更改src/layout/index.js文件以导入office组件 从' React‘导入链接，从’gatsby-链接‘导入{ Button }从'office-ui-fabric-react/lib/Button’类模板扩展React.Component {. 还有哇哦！它停下来工作了。在浏览器控制台中，我看到一个错误：SyntaxError: export declarations may only appear at top level of a module

我提供了一个完整的复制库：https://github.com/stevebeauge/repro-gatsbyjs-officeui-error

编辑挖掘一下我可以在生成的'common.js‘文件中看到错误：

/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {

    export * from './components/Button/index';
    //# sourceMappingURL=Button.js.map

/***/ }),

这里的出口似乎是被禁止的，这导致了Babel问题(尽管没有找到解决的办法)。

Answer 1

最近我偶然发现了类似的错误，我的解决方案是显式地从lib-commonjs导入：

import { Button } from 'office-ui-fabric-react/lib-commonjs/Button'; 

而不是

import { Button } from 'office-ui-fabric-react/lib/Button'

由于babel没有将office-ui-fabric-react转换为CommonJS模块，所以出现了错误。