Getting an error when deploying a Next.js Project with Lottie Animations

Question

I use Vercel and want to deploy a project. I'm using Lottie Animations that I have as JSON Data in the project. But Vercel just throws this error:

[15:23:18.194] > next build
[15:23:18.194] 
[15:23:18.886] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[15:23:18.887] This information is used to shape Next.js' roadmap and prioritize features.
[15:23:18.888] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[15:23:18.888] https://nextjs.org/telemetry
[15:23:18.888] 
[15:23:19.000]    ▲ Next.js 15.1.3
[15:23:19.000] 
[15:23:19.033]    Creating an optimized production build ...
[15:23:21.750] (node:227) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
[15:23:21.750] (Use `node --trace-deprecation ...` to show where the warning was created)
[15:23:26.821] Failed to compile.
[15:23:26.822] 
[15:23:26.822] ./components/common/Loading.tsx
[15:23:26.822] Module not found: Can't resolve '../../lotties/loader.json'
[15:23:26.822] 
[15:23:26.823] https://nextjs.org/docs/messages/module-not-found
[15:23:26.823] 
[15:23:26.823] Import trace for requested module:
[15:23:26.823] ./app/values/page.tsx
[15:23:26.823] 
[15:23:26.828] 
[15:23:26.828] > Build failed because of webpack errors
[15:23:26.854] Error: Command "npm run build" exited with 1
[15:23:27.247] 

Loading.tsx

"use client";

import React from "react";
import * as loader from "../../lotties/loader.json";
import Lottie from "react-lottie";

function Loading() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: loader,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <Lottie
        options={defaultOptions}
        isClickToPauseDisabled
        style={{ width: "150px", height: "100px", cursor: "default" }}
      />
      <h6 className="text-2xl font-light text-center mt-4">Hang tight! We’re discovering your passion...</h6>
    </div>
  );
}

export default Loading;

Folder structure

Is my folder structure wrong or am I using the json data wrong here?

I just want to use the JSON Lottie Data. The next build command is working locally but fails in Vercel.

Thanks for any help!

Answer 1

The solution was to put the JSON in the public folder

"use client";

import React from "react";
import loaderData from "@/public/lotties/Loader.json";
import dynamic from "next/dynamic";

function Loading() {
  const Lottie = dynamic(() => import("react-lottie"), { ssr: false });

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: loaderData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <Lottie
        options={defaultOptions}
        isClickToPauseDisabled
        style={{ width: "150px", height: "100px", cursor: "default" }}
      />
      <h6 className="text-2xl font-light text-center mt-4">Hang tight! We’re discovering your passion...</h6>
    </div>
  );
}

export default Loading;