Issue with importing .riv file into Next js component

[Luna]

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

[Zachary Plata]

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;