1

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?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Maxime Ghéraille
  • 1,465
  • 3
  • 16
  • 31

1 Answers1

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

Tahimí León Bravo
  • 51
  • 4