fluent "lib-commonjs" export from fabric "lib"

[itslooklike]

Hello 👋

i use import { PrimaryButton } from '@fluentui/react/lib-commonjs/Button'; in nextjs
and got error SyntaxError: Unexpected token 'export'

i open node_modules/@fluentui/react/lib-commonjs/Button.js and saw, what hi require office-ui-fabric-react/lib/Button (lib not lib-commonjs)

is it wrong export? (i check only PrimaryButton component, maybe this problem in another components too)

Environment Information

• "@fluentui/react": "^7.105.5"

Priorities and help requested:

Are you willing to submit a PR to fix? (No)

Requested priority: (Normal)

[aneeshack4]

@itslooklike Are you trying to use this PrimaryButton? https://developer.microsoft.com/en-us/fluentui#/controls/web/button or this one? https://fluentsite.z22.web.core.windows.net/components/button/definition

[itslooklike]

@aneeshack4 to be honest, I don't know which button I'm trying to use
I just want to use any button, and try example from readme.md and get error

https://github.com/microsoft/fluentui#integrating-in-your-project

[aneeshack4]

@itslooklike I believe that used to say: import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
This was changed recently. Try out ^ and lmk if it doesn't work.

[aneeshack4]

@itslooklike Actually wait why don't use import { PrimaryButton } from '@fluentui/react/lib/Button'; - as in use lib instead of lib-common. I think that should work you - let me know.

[itslooklike]

@aneeshack4 i need use lib-commonjs version of module, because i need SSR
i think problem is what lib-commonjs version module have wrong export
It export ESM module, but must export CommonJS

i create a codesanbox, if it can help https://codesandbox.io/s/fluent-cjcm4

[itslooklike]

well, i solve my problem, by use import { PrimaryButton } from "@fluentui/react
so its wrong build process for common-js modules, or confusing documentation

[aneeshack4]

@itslooklike Glad you were able to fix the problem. I'm not sure if the documentation stating the import { PrimaryButton } from '@fluentui/react/lib/Button'; is correct. I do know office-ui-fabric-react has been re-exported but maybe the lib part isn't correct. I believe @ecraig12345 recently made this change in PR #12378 - Elizabeth do you think this needs to be changed?

[ecraig12345]

This is interesting--the checked in code using lib paths is correct, but I think we need to add a post-build step to @fluentui/react which converts lib imports in the commonjs build output to lib-commonjs. @kenotron added code for a step like this in the past, but I'm not sure if we ever enabled it.

[ecraig12345]

This was fixed at some point in the past year by adding a postprocessing step. If anyone notices it break again, feel free to file a new issue.