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