4

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

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

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

如何解决这个问题？（我对节点开发很陌生）。

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

这是我完成的完整操作（如果重要，在 Windows 10 x64 上）：

  1. 克隆了 gatsby-starter-blog-no-styles repo：

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

    喝杯咖啡（很快就会转向纱线）

  2. 检查是否有效

    gatsby develop

    打开浏览器（http://localhost:8000）。没关系

  3. 添加了 office ui fabric react 组件

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

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

  4. 更改 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 问题（虽然没有找到解决方法）

4

1 回答 1

2

最近我偶然发现了类似的错误，我的解决方案是显式导入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 模块而发生错误。

于 2018-07-23T09:23:22.610 回答