Problem Loading file: may be corrupt (React)

Bundling Code:

const path = require("path");

const common = require("./webpack-common.config");

const { merge } = require("webpack-merge");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const MiniCSSExtractPlugin = require("mini-css-extract-plugin");

const CSSMinifier = require("css-minimizer-webpack-plugin");

const JSMinifier = require("terser-webpack-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const WebpackShellPluginNext = require("webpack-shell-plugin-next");

module.exports = merge(common, {

mode: "production",

module: {

rules: [

{

test: /.riv$/i,

type: "asset/resource",

generator: {

filename: "animations/[name][ext]"

}

}

]

}

});

Usage:

const Container = (props) => {

return (

<div className="slb-welcomescreen--wrapper-rhs slb-width--50 slb-h100 slb-dflex slb-posrel">

<div className="slb-welcomescreen-rotated">

<AnimationLoader

animationData={ImageStrip}

stateMachines={"State Machine 1"}

/>

</div>

</div>

);

};

export default Container

AnimationLoader.js

import React, { useEffect } from "react";

import { useRive, EventType } from "@rive-app/react-canvas";

const Container = (props) => {

const {

animationData = {},

autoplay = true,

stateMachines,

onSelect

} = props;

const onRiveEventReceived = ({ data }) => {

onSelect && onSelect(data);

};

const { rive, RiveComponent } = useRive({

src: animationData,

stateMachines: stateMachines,

autoplay: { autoplay }

});

useEffect(() => {

if (rive) {

rive.on(EventType.RiveEvent, onRiveEventReceived);

}

}, [rive]);

return <RiveComponent />;

};

export default Container;

Version: @rive-app/react-canvas": "^4.13.3

(Note: we ensured that State Machine name is correct.)