Module parse failed: Unexpected character '�' during yarn build

[caleb15]

yarn add react-giphy-searchbox --save

yarn build
... output truncated ...
ERROR in /home/caleb/Documents/fifteen5/node_modules/react-giphy-searchbox/es/assets/poweredByGiphy.png 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)
 @ /home/caleb/Documents/fifteen5/node_modules/react-giphy-searchbox/es/index.js 15:0-63 159:23-43
 @ ./components/GifSelector/GifDropdown.tsx
 @ ./components/GifSelector/GifButton.tsx
 @ ./high_fives/src/HighFive.tsx
 @ ./onboarding/src/steps/HighFiveStep/HighFiveStep.tsx
 @ ./onboarding/src/steps/index.tsx
 @ ./onboarding/src/OnboardingRoot.tsx
 @ ./onboarding/src/index.tsx
error Command failed with exit code 2.

add_gif_selector ✗ $ yarn --version                                                                                                                                            1 ↵
1.22.5
(fifteen5) caleb@caleb-H110M-A:~/Documents/fifteen5 
add_gif_selector ✗ $ node --version
'Tipz:' nodejs --version
v12.18.1

We use webpack to build our react app.

[caleb15]

Installing file-loader fixes it

https://webpack.js.org/loaders/file-loader/ https://github.com/webpack-contrib/file-loader

[sergiop]

Yes, that poweredByGiphy.png static file could be a problem, but I don't know if I can do something by my side to avoid devs using a file loader in their bundler config. Any idea?

Maybe I can use an inline SVG instead of a PNG. This should get around the problem but it will reduce the backward browser compatibility.