HoverReactionBarControl.js / @fluentui/react-positioning/lib/usePositioning - Module parse failed: Unexpected token

[MarkusLanger]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.16.0]

Expected / Desired Behavior / Question

Use of the library in a library component without problems when building the extension solution.

Observed Behavior

An error appears when building the extension solution.

[11:28:37] Error - [webpack] 'dist':
./node_modules/@floating-ui/devtools/dist/index.js 34:166
Module parse failed: Unexpected token (34:166)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var r;
| const o = e;

return !!((r = o == null ? void 0 : o.ownerDocument) != null && r.defaultView && o instanceof o.ownerDocument.defaultView[(n == null ? void 0 : n.constructorName) ?? "HTMLElement"]);
| }
| const E = () => ${i}:${crypto.randomUUID()}, w = () => {
@ ./node_modules/@fluentui/react-positioning/lib/usePositioning.js 8:0-49
@ ./node_modules/@fluentui/react-positioning/lib/index.js
@ ./node_modules/@fluentui/react-components/lib/index.js
@ ./node_modules/@pnp/spfx-controls-react/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.js
@ ./node_modules/@pnp/spfx-controls-react/lib/controls/HoverReactionsBar/HoverReactionsBar.js
@ ./node_modules/@pnp/spfx-controls-react/lib/controls/HoverReactionsBar/index.js
@ ./node_modules/@pnp/spfx-controls-react/lib/HoverReactionsBar.js
@ ./node_modules/@pnp/spfx-controls-react/lib/index.js
@ ./node_modules/@novacapta/nc-intranet-manage-content/lib/libraries/manageContent/create/importantMessage/Create.js
@ ./node_modules/@novacapta/nc-intranet-manage-content/lib/libraries/manageContent/create/importantMessage/CreateImportantMessage.js
@ ./node_modules/@novacapta/nc-intranet-manage-content/lib/index.js
@ ./lib/extensions/createContent/CreateContent.js
@ ./lib/extensions/toolbox/feature/App.js
@ ./lib/extensions/toolbox/ToolboxApplicationCustomizer.js

Steps to Reproduce

Node Version: 18.17.1
SPFx Version: 1.18.2

• Create SPFx Library Component Solution

• Install "@pnp/[email protected]"

• Use the DateTImePicker Component

• Create a NPM Package from the Library Component

• Create SPFx Extension Solution

• Install the NPM Package of the Library Component

• Use the component from the Library which uses the DateTimePicker component

• Build the extension solution => Error occurs

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[MarkusLanger]

The problem no longer exists with version @pnp/[email protected]
How can we fix it with the new version?

[trillian74]

@MarkusLanger I experienced the same as you. I fiddled a lot and didn't quite know where to start, but i realized that when i import from top e.g.
import { IFilePickerResult } from "@pnp/spfx-property-controls";
Then it failed. I then imported all components and interfaces from their actual place and everything worked nicely. Let me know if this worked for you?

[MarkusLanger]

@trillian74 Thanks a lot for your information. It works for me too.
I think until the "HoverReactionBar" component is used. Then the error will occur again.

[murtuzamj]

Seems to be occuring for me as well, on Windows, ubuntu,

Node, 14.17.3 and node 16.8.1

[jeffseiffert]

Issue occurs for me only component I'm using from spfx-controls-react is the live persona

[michaelmaillot]

Hello everyone,

I tried to repro the issue, without success.

I created a component library which contains both DateTimePicker and HoverReactionsBar controls in a single component.

I then created an SPFx extension which includes a dependency to the library component and includes the single component mentioned before. I could run the extension without issue.

Environment info:

• SPFx version for both solutions: 1.18.2
• SPFx React Controls version: 3.17.0
• Node version: 18.19.0

Does anyone here can try with updated version of the controls?

If needed, I can create sample solutions. Let me know.