Fluentui: v6.1.2 commonjs module entry is now under lib-commonjs, doc/sample code still pointing to lib

[hailiu2586]

ts-jest breaks with 'unknown token export' when

import {loadTheme} from 'office-ui-fabric-react/lib/Styling';

work around by

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

[partnerinflight]

Not just loadTheme. All lib imports need to be changed to lib-commonjs.

And I'm not sure it's ts-jest. Rather, ts-node.

[dzearing]

Sorry for any friction this could have caused, but this is a known and documented issue here:

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/6.0_RELEASE_NOTES.md#lib-commonjs

The gist is that because existing partners, using webpack4 and already using /lib exports, want tree shaking out of the box, we need to default /lib to es6.

This however conflicts with node.js processes like jest, since node.js itself can't parse es6 yet. :(

So, to resolve commonjs modules in Jest, you can use this config blurb in your jest.config.js:

  moduleNameMapper: {
    'office-ui-fabric-react/lib/': 'office-ui-fabric-react/lib-commonjs/'
  },

I believe that should be all you need to do.

[dzearing]

@hailiu2586 and @partnerinflight can you confirm if this works for you? (Please feel free to close the bug if so!)

[partnerinflight]

@dzearing in my case I'm not using jest at all. I'm a noob to the JS world; I'm using https://skellock.github.io/typescript-with-electron-react-kit/#/ with all jest-related modules removed. (I was trying to get to bare minimum.) Not sure what I should be configuring, given that.

[dzearing]

@partnerinflight can you simply adjust your tests to import from office-ui-fabric-react or office-ui-fabric-react/lib-commonjs?

The example code pointing to lib is not a bug. It's perfectly fine, assuming you webpack things.

[dzearing]

@hailiu2586 you can also just remove the path in the import and just import from 'office-ui-fabric-react'

[dzearing]

Haven't heard back on this issue but the fix is mentioned above and in the release notes. Please re-open if you still have friction.

[healthycola]

Use this: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/6.0_RELEASE_NOTES.md#lib-commonjs

moduleNameMapper: { 'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1' },