Issue with importing .riv file into Next js component

[LunaJet]

When importing a .riv file into Next js I run into the following error

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

[zplata]

WIth NextJS there are two approaches to including Rive files:

1. Add your Rive files to the public/ folder so it can be included like any other asset such as an image or font file. Then when instantiating Rive, set src as src: "/your-rive-file.riv"
2. Using url-loader to transform the Rive file imported to a data-url.

   
   const nextConfig = {
   reactStrictMode: true,
   webpack: (
   config,
   { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
   ) => {
   config.module.rules.push({
     test: /\.riv$/,
     use: {
       loader: "url-loader",
       options: {
         limit: 100000,
       },
     },
   });
   return config;
   },
   };

module.exports = nextConfig;