When I created react outlook add-in and start outlook add-in I got this error in webpack
ERROR in ./node_modules/@fluentui/react-icons/lib/utils/fonts/FluentSystemIcons-Resizable.woff2 1:4 Module parse failed: Unexpected character '' (1:4) 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 12:0-67 36:30-46 @ ./node_modules/@fluentui/react-icons/lib/index.js 25:0-74 25:0-74
webpack 5.90.3 compiled with 9 errors in 20766 ms
This is a known issue with the basic Office add-in that uses Fluent React UI v9. The workaround is to open the webpack.config.js file in the root of the project and find the line:
test: /\.(png|jpg|jpeg|gif|ico)$/,
change it to read:
test: /\.(png|jpg|jpeg|gif|ico|ttf|woff|woff2)$/,