4

I'm trying to add OfficeUI fabric components in a blog build using gatsby js.

As soon as I'm importing any component, the site stop to works.

Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module

How to fix this ? (I'm very new to node dev).

Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.

Here's the complete operations I've done (on Windows 10 x64 if it matters):

  1. cloned the gatsby-starter-blog-no-styles repo :

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

    drink a coffee (will move to yarn soon)

  2. Check that works

    gatsby develop

    Opened the browser (http://localhost:8000). Its Ok

  3. added office ui fabric react components

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

    Restart gatsby develop. Still working

  4. change src/layouts/index.js file to import an office component

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

class Template extends React.Component {
  ....

    And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module

I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error

[Edit] Digging a bit I can see in the generated 'common.js' file the error :

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

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

/***/ }),

The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)

Steve B
  • 36,818
  • 21
  • 101
  • 174
  • I found that export error can be resolved by changing in you WebPack. Config. Js file in this link https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default – Shadab Siddiqui Jul 22 '18 at 07:25

1 Answers1

2

Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs: 

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

instead of 

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

Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • 1
    Thank you very much. I was struggling for weeks trying to put everything together. Your solution works like a charm. Though, I'd be interested in getting a solution within the gatsby build – Steve B Jul 23 '18 at 11:34