Module parsing error with @lottiefiles/dotlottie-react in Webpack 4 environment

[mtshv]

Description of the Issue

When using @lottiefiles/dotlottie-react in a Webpack 4 project, the application crashes with a module parsing error. Despite configuring Webpack and Babel to handle the package, the build process fails when attempting to parse the module.

Expected Behavior

The Lottie animation should load and play correctly without any parsing errors.

Actual Behavior

The application crashes with a module parsing error:

ERROR in ./node_modules/@lottiefiles/dotlottie-react/dist/browser/index.js 21:9777
Module parse failed: Unexpected token (21:9777)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           - ArrayBuffer (dotLottie),
|           - object (Lottie JSON).
>           Received: ${typeof r}`);return;}l?(this._eventManager.dispatch({type:"load"}),B&&this.resize(),this._eventManager.dispatch({type:"frame",currentFrame:this.currentFrame}),this._render(),this._dotLottieCore.config().autoplay&&(this._dotLottieCore.play(),this._dotLottieCore.isPlaying()?(this._eventManager.dispatch({type:"play"}),this._animationFrameId=this._frameManager.requestAnimationFrame(this._draw.bind(this))):console.error("something went wrong, the animation was suppose to autoplay")),B&&this._canvas instanceof HTMLCanvasElement&&(this._renderConfig.freezeOnOffscreen&&i1.observe(this._canvas,this),this._renderConfig.autoRe...

Attempted Solutions

1. Added WebAssembly experimental support in webpack config
2. Tried different loaders for the package

Possible Solution

Could you please:

1. Provide guidance on how to properly integrate this package with Webpack 4
2. Consider providing a version that's compatible with Webpack 4 environments
3. Add documentation for webpack 4 integration if there are special requirements

Steps to Reproduce

1. Create or use an existing Webpack 4 project
2. Install the packages: npm install @lottiefiles/dotlottie-react
3. Use the DotLottieReact component in a React component:

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

<DotLottieReact
  src="https://lottie.host/63e43fb7-61be-486f-aef2-622b144f7fc1/2m8UGcP8KR.json"
  loop
  autoplay
/>

4. Run the project with webpack-dev-server

P.S. I searched through issues for similar reports, but did not find anything

[theashraf]

@mtshv Can you share a repo or CodeSandbox that reproduces the issue?