Webpack Build Error Due to Nullish Coalescing Operator in Recent Update

[Menny]

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.

[Pradeep Thapaliya]

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

[Westley]

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.

[Caspar Rubin]

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

[Anas]

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

[Konstantinos Voulgaridis]

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.