search

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
159 stars 11 forks source link

Error while using DotLottieReact - ERR_REQUIRE_ESM #274

Open pmapsp opened 3 months ago

pmapsp commented 3 months ago

I'm trying to use the DotLottieReact component from lottiefiles to run an animation:

import React from 'react'; ``import { DotLottieReact } from '@lottiefiles/dotlottie-react'; export const Animation = () => ( <div> <DotLottieReact src="./animation.lottie" /> </div> );

When I try to render the animation it results in the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /opt/assets/node_modules/@lottiefiles/dotlottie-react/dist/index.js from /opt/assets/static/server/CHECKOUT.f3cec222b0f905fa.js not supported. Instead change the require of index.js in /opt/assets/static/server/CHECKOUT.f3cec222b0f905fa.js to a dynamic import() which is available in all CommonJS modules. at Hook._require.Module.require (/opt/orion-renderer/node_modules/require-in-the-middle/index.js:188:39) at @lottiefiles/dotlottie-react (/opt/assets/static/server/CHECKOUT.f3cec222b0f905fa.js:73868:18) at webpack_require (/opt/assets/static/server/CHECKOUT.f3cec222b0f905fa.js:74222:41) at ./src/main/react/framework/ds/core/animation/library/src/hamburger-closing/HamburgerClosing.tsx (/opt/assets/static/server/CHECKOUT.f3cec222b0f905fa.js:7892:86) at webpack_require (/opt/assets/static/server/CHECKOUT.f3cec222b0f905fa.js:74222:41)

Consuming repo

What repo were you working in when this issue occurred?

@lottiefiles/dotlottie-react

theashraf commented 3 months ago

@pmapsp, I noticed that you're using webpack, but I'm unable to reproduce this issue with CRA. Could you let me know which framework or react app scaffolding tool you're using ?