Lottie animation not working in new remix version

[mbkProgrammer]

When I try to use Lottie animation in the remix, it gives this error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6109:9)
    at renderNodeDestructiveImpl (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6142:14)
    at renderNode (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6325:12)
    at renderHostElement (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:5708:3)
    at renderElement (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6018:5)
    at renderNodeDestructiveImpl (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6142:14)
    at renderIndeterminateComponent (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:5851:7)
    at renderElement (C:\Users\mbk20\Projects\test-v2-remix\node_modules\react-dom\cjs\react-dom-server.node.development.js:6012:7)

My code:

import Lottie from "lottie-react";
import animation from '../about.json';

export default function Index() {
 return (
   <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
     <Lottie animationData={animation} />
   </div>
 );
}

[pedrorolando]

I'm having the same issue!

[paulsocal]

Having the same issue with react-fast-marquee

[hakimLyon]

Working for me.

If you are using Content Security Policy (CSP) on your server, include 'unsafe-eval' in the script-src directive.

import { Outlet } from '@remix-run/react'
import Tr from 'lottie-react'
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
import { Spacer } from '#app/components/spacer.tsx'
import callcenter from '../../lotties/call-center.json'
import { useNonce } from '#app/utils/nonce-provider.ts'

const Lottie = Tr.default

export default function CallCenterLayout() {
	const nonce = useNonce()
	console.log({ d: nonce })

	return (
		<div>
			<Spacer size="4xs" />
			<main>
				<Outlet />
				<Lottie nonce={nonce} animationData={callcenter} />
			</main>
		</div>
	)
}

[KwaminaWhyte]

This works

`import React from "react";
import { useLottie } from "lottie-react";
import lottie from "~/assets/empty.json";

const style = {
height: 300,
};

export default function EmptyLottie() {
const options = {
animationData: lottie,
loop: true,
autoplay: true,
};

const { View } = useLottie(options, style);

return

{View}

;
}
`

[zeluizr]

thanks bro!

[zeluizr]

For me work use this example

import { useLottie } from "lottie-react";
import groovyWalkAnimation from "~/assets/looties/home.json";

export default function Index() {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true,
    autoplay: true,
  };

  const home = useLottie(options);

  return (
    <div className="container">
      <h1 className="text-3xl">inmmerce</h1>
      {home.View}
    </div>
  );
}