babeljs - 语法错误 : export declarations may only appear at top level of a module when trying to import office-ui-fabric in a Gatsbyjs blog

Question

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

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

使用开发命令，我可以在浏览器控制台中看到:SyntaxError: export declarations may only appear at top level of a module
如何解决这个问题？ (我对节点开发很陌生)。

我所做的搜索表明 babel 不使用 es2015 预设存在问题。但是，我仔细检查了，.babelrc 文件提到了这个预设。

这是我完成的完整操作(如果重要，在 Windows 10 x64 上):

克隆了 gatsby-starter-blog-no-styles repo:

gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install

喝杯咖啡(很快就会转向 yarn )

检查是否有效

gatsby develop

打开浏览器 (http://localhost:8000)。没关系

添加了 office ui fabric react 组件

npm install --save office-ui-fabric-react

重新启动 gatsby 开发。还在工作

更改 src/layouts/index.js 文件以导入办公组件

import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'

class Template extends React.Component {
  ....

瞧!它停止工作。在浏览器控制台中，我看到一个错误:SyntaxError: export declarations may only appear at top level of a module

我在 GH 中放了一个完整的复制库: 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 模块。