SyntaxError inside eot file with file-loader and webpack

Question

I'm trying to use React Rainbow Components with Next.js (TypeScript) but I could not import font, so I used webpack with url-loader.

For some reason I keep getting the error SyntaxError: Invalid or unexpected token error - D:\Git Repository\project\node_modules\react-rainbow-components\components\Application\fonts\Lato-Black\Lato-Black.eot:1 ��☺ inside the eot file from their fonts.

Here is my webpack config in next.config.js:

module.exports = {
 webpack: (config, options) => {
 config.module.rules.push({ 
 test: /\.(png|woff|woff2|eot|ttf|svg)$/,
 use: [
 {
 loader: 'url-loader?limit=100000'
 },
 ],
 })
 return config
 },
}

Any idea what I did wrong? Or is it a problem inside their font itself?

Answer 1

This was already fixed in the version, if you update the version of react-rainbow-components to v1.24.1, the fonts were moved to a CDN. Here are the release-notes https://github.com/nexxtway/react-rainbow/releases