Webpack Build Error "You may need an appropriate loader" since v 2.0.228

[martinguenther]

Since update to version 2.0.228 I'm getting the following error on the Webpack build:

ERROR in ./node_modules/@fluentui/react-icons/lib/utils/fonts/FluentSystemIcons-Filled.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
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
(Source code omitted for this binary file)
 @ ./node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.js 4:0-59 24:25-38
 @ ./node_modules/@fluentui/react-icons/lib/index.js 25:0-74 25:0-74
 @ ./src/taskpane/components/App.tsx 13:0-96 79:111-127 82:111-125 86:111-132
 @ ./src/taskpane/main.tsx 4:0-35 32:32-35 35:42-38:5 35:4-38:6 36:24-59

I get a total of 9 errors, basically for all font imports of @fluentui\react-icons\lib\utils\fonts\createFluentFontIcon.js.

import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
import fontFilledWoff from './FluentSystemIcons-Filled.woff';
import fontFilledWoff2 from './FluentSystemIcons-Filled.woff2';
import fontRegularTtf from './FluentSystemIcons-Regular.ttf';
import fontRegularWoff from './FluentSystemIcons-Regular.woff';
import fontRegularWoff2 from './FluentSystemIcons-Regular.woff2';
import fontOneSizeTtf from './FluentSystemIcons-Resizable.ttf';
import fontOneSizeWoff from './FluentSystemIcons-Resizable.woff';
import fontOneSizeWoff2 from './FluentSystemIcons-Resizable.woff2';

If I downgrade to 2.0.226 it builds without errors. I'm on the latest (as of today) version 9.46.5 of @fluentui/react-components.

I'm using the icons as React elements as described at https://react.fluentui.dev/?path=/docs/concepts-developer-icons-icons--page

import { DismissRegular, CloudArrowDownRegular, SignatureRegular } from "@fluentui/react-icons";

I do not have any specific configuration related to using the icons in webpack.config.js.

As downgrading fixes the issue, I'm guessing it might be a problem outside of my code. But I can be wrong here. Let me know if you need further data. I'd be glad to help.

Thank you for your attention and help.

[ccard]

I also started encountering this issue when this package was released.

[UladzislauYarotski]

Here, same as well
We bumped version and meet same error

[lamotik]

Same here:

ERROR in ./node_modules/@fluentui/react-icons/lib/utils/fonts/FluentSystemIcons-Resizable.ttf 1:0
Module parse failed: Unexpected character 'NULL' (1:0)
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
(Source code omitted for this binary file)
@ ./node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.js 10:0-63 38:25-39
@ ./node_modules/@fluentui/react-icons/lib/index.js 25:0-74 25:0-74
@ ./src/taskpane/components/Templates/VariableEditor/SectionEditor.tsx 55:0-86 166:68-83 172:89-103 178:89-103 184:68-80
@ ./src/taskpane/router/router.tsx 7:0-81 102:69-82
@ ./src/taskpane/index.tsx 23:0-37 31:58-64

[layershifter]

This have been fixed in #696, please use @fluentui/[email protected] & later.