Fluentui: Unexpected token export on NextJS SSR rendering

[Gmulti]

Bug Report

• __Package version(s)__: latest
• __Browser and OS versions__: Chrome
  

  Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Blocking

Describe the issue:

I try to use this package with SSR Rendering on NextJS

Actual behavior:

Unexpected token export
/Users/thomas/Sites/atlas/atlas-supervisor/node_modules/office-ui-fabric-react/lib/Fabric.js:1
(function (exports, require, module, __filename, __dirname) { export * from './components/Fabric/index';

Expected behavior:

No bug :)

[ghost]

I'm facing the same issue. I just tried to render a PrimaryButton with nextjs.

'use strict';
import React from 'react';
import {
  PrimaryButton,
} from 'office-ui-fabric-react/lib/Button';

export default class extends React.Component {
  render() {
    return (
      <div>
        <PrimaryButton>
          I am a button.
        </PrimaryButton>
      </div>
    );
  }
}

[martinoss]

I have the same problem with create-react-app (react-scripts-ts) after using a button from fabric in my app when running a unit test:

Test suite failed to run

 C:\Code\VSTS\MyApp\node_modules\office-ui-fabric-react\lib\Button.js:1                                                   
 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Button/index';  
                                                                                          ^^^^^^                  


 SyntaxError: Unexpected token export                                                                                                 

[dzearing]

It is extremely likely that the bundler you're using does not support es6. Can you change the \lib\ to \lib-commonjs\ and see if that affects your results?

[ghost]

@dzearing jup, that was it. That fixed it for me, going to add now es6 support. Thank you ♥

[dzearing]

Glad it helped! Thanks for the followup!

[hrnkoji]

https://stackoverflow.com/questions/51328448/syntaxerror-export-declarations-may-only-appear-at-top-level-of-a-module-when-t

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

[joaodfmota]

Issue on nextjs. https://github.com/zeit/next.js/issues/706

If you don't want use lib-commonjs use this plugin https://www.npmjs.com/package/next-transpile-modules