Webpack Build Error Due to Nullish Coalescing Operator in Recent Update

[Menny1337]

Hello Fluent UI team,

In a recent change to the @fluentui/react-icons package, a syntax error has been introduced which breaks builds using Webpack. The file in question is IconDirectionContext.js where a nullish coalescing operator (??) is used.

Here is the offending code:

export const useIconContext = () => React.useContext(IconDirectionContext) ?? IconDirectionContextDefaultValue;

The error message thrown by Webpack is as follows:

@fluentui/react-icons/lib/contexts/IconDirectionContext.js 5:76
Module parse failed: Unexpected token (5:76)
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

This issue seems to stem from the nullish coalescing operator (??) not being recognized by certain Webpack configurations. This was not an issue before the recent changes to IconDirectionContext.js.

In the meantime, we have mitigated this issue by reverting to an older version of the @fluentui/react-icons package. However, I believe this issue should be addressed at the source. One possible solution could be to revise the use of newer syntax that is not universally supported or to modify the target setting in the tsconfig to ensure the compiled code is compatible with more environments.

The line that introduced this issue can be found here.

Thank you for your attention to this matter.

[pradeept95]

I am having the same issue!

[14:01:59] Error - [webpack] 'dist':
./node_modules/@fluentui/react-icons/lib/contexts/IconDirectionContext.js 5:76
Module parse failed: Unexpected token (5:76)
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
| const IconDirectionContextDefaultValue = {};
| export const IconDirectionContextProvider = IconDirectionContext.Provider;

export const useIconContext = () => React.useContext(IconDirectionContext) ?? IconDirectionContextDefaultValue;
@ ./node_modules/@fluentui/react-icons/lib/contexts/index.js 1:0-39 1:0-39
@ ./node_modules/@fluentui/react-icons/lib/index.js
@ ./node_modules/@fluentui/react-select/lib/components/Select/useSelect.js
@ ./node_modules/@fluentui/react-select/lib/components/Select/Select.js
@ ./node_modules/@fluentui/react-select/lib/components/Select/index.js
@ ./node_modules/@fluentui/react-select/lib/Select.js
@ ./node_modules/@fluentui/react-select/lib/index.js
@ ./node_modules/@fluentui/react-components/lib/index.js
@ ./lib/webparts/contractManagement/ContractManagementWebPart.js

[westleyMS]

I have run into the exact same stack in an SPFx project using fluentUI.

fixed by rolling back to 2.0.203 on the react-icons component.

[CasparRubin]

Same here trying to run this demo: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9

Followed all instructions...
node -v: v16.18.1
npm -v: 8.19.2
"npm install" into "gulp serve" and i get the error mentioned above

Error - [webpack] 'dist': ./node_modules/@fluentui/react-icons/lib/contexts/IconDirectionContext.js 5:76 Module parse failed: Unexpected token (5:76) 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

[karthik15981]

Ran into the same issue as well and our temporary fix was to use "npm overides" to force React Fluent UI components to use 2.0.203

[AnasSahel]

I Ran into the same issue as well. Didn't find a solution unfortunately

[kboul]

This is still reproducible using version 2.0.207. Had to revert to @fluentui/react-icons 2.0.202 but still not passing while before it was.

[Linkybill]

same Problem here...

[spencer-nelson]

The Nullish Coalescing operator from IconDirectionContext was removed in #625 which preceeded 2.0.214. Please confirm you have that, or a later version, or otherwise point to the usage in a more recent version of the library.

[Linkybill]

I have installed latest version of fluent ui react components

"@fluentui/react-components": "^9.35.1".

Which version of fluentuireactcomponents should I install?

[spencer-nelson]

Sorry, but that isn't a dependency of this library (that I'm aware of) and I don't know the answer. Further, I apologize for the confusion, but I suggest you open an issue in the microsoft/fluentui repository related to that package (https://github.com/microsoft/fluentui/tree/master/packages/react-components)