next.js Moment locale在构建版本中不起作用，但在本地开发中起作用

我有一个使用Next.js的应用程序，我需要显示孟加拉语日期而不是英语。但是，在dev: next dev期间，它按预期工作。但是在build:next build之后，它无法按预期工作。在生产优化版本中，我看到它以英语显示，例如২০ জানুয়ারি, রবিবার this to 20 January, Sunday。

我的代码有什么问题

import { DateIcon } from "../../../utils/svgImages/svgImage";
import BeguniButton from "../../../components/Buttons/BeguniButton";
import Slider from "react-slick";
import { useLazyQuery } from "@apollo/client";
import { STUDENT_SPECIFIC_LESSONS_QUERY } from "../../../api/liveClass";
import moment from "moment"; // <-- You see?
import "moment/locale/bn"; // <-- You see?
import { useEffect, useState } from "react";
import { Empty, Skeleton } from "antd";
import SectionError from "../../../components/Error/Section";
import { classTypeDic } from "../../../lib/utils/constants";
import LiveClassDetails from "./LiveClassDetails";

const sliderSettings = {
  arrows: false,
  dots: true,
  autoplay: true,
  speed: 200,
  slidesToShow: 1,
  slidesToScroll: 1,
  initialSlide: 0,
  className: "general-slider",
};

const TodayClass = ({
  router,
  lessonId,
  contentId,
  subName,
  subColor,
  classType,
  status,
  title,
  chapterName,
  startTime,
  endTime,
  date,
}) => {
  const [showDetails, setShowDetails] = useState(false);

  const joinLiveClass = () =>
    router.push(
      `/student/live-class/${contentId}?lesson_id=${lessonId}&programType=AcademicProgramLiveClassObject`
    );
  const seeDetails = () => setShowDetails(!showDetails);

  return (
    <>
      <div className="flex flex-col px-4 py-5 border border-OutlineLightBlue rounded-lg md:rounded-10">
        <div className="flex gap-x-2.5 items-center">
          <div
            className="font-balo font-medium text-xs md:text-14px md:leading-6"
            style={{ color: subColor }}
          >
            {subName}
          </div>
          <div className="w-1 md:w-1.5 h-1 md:h-1.5 bg-OutlineLightBlue rounded-full" />
          <div className="font-balo font-medium text-xs md:text-14px md:leading-6 text-Body">
            {classType} ক্লাস
          </div>
        </div>
        <div className="mt-3 md:mt-2 font-balo font-semibold text-base md:text-lg text-Body">
          {title}
        </div>
        <div className="mt-0 md:mt-2 font-balo font-medium text-14px leading-6 md:text-base text-Body">
          {chapterName}
        </div>
        {status === `ongoing` ? (
          <div className="mt-2.5 md:mt-1.5 mb-5 md:mb-4 flex gap-x-2 md:gap-x-2.5 items-center">
            <div className="w-2 md:w-2.5 h-2 md:h-2.5 bg-Semantic rounded-full" />
            <div className="font-balo font-medium text-xs text-Semantic md:text-14px leading-6">
              তোমার ক্লাস শুরু হয়ে গেছে
            </div>
          </div>
        ) : (
          <div className="mt-2.5 md:mt-1.5 mb-5 md:mb-4 flex gap-x-2 items-center text-xs font-balo font-medium md:text-14px leading-6 text-Body2">
            <DateIcon />
            <div className="font-grotesk font-normal">{date}</div>
            <div>|</div>
            <div>
              {startTime} - {endTime}
            </div>
          </div>
        )}
        <BeguniButton
          onClick={status === `ongoing` ? joinLiveClass : seeDetails}
          icon={false}
        >
          {status === `ongoing` ? `এখনই জয়েন করো` : `বিস্তারিত দেখো`}
        </BeguniButton>
      </div>
      <LiveClassDetails
        id={contentId}
        isOpen={showDetails}
        toggle={seeDetails}
      />
    </>
  );
};

const TodayClasses = ({ router, enrolledProgramId }) => {
  const [stdSpecificLessons, setStdSpecificLessons] = useState([]);
  const startDate = moment().locale("en").format("YYYY-MM-DD"); // <-- You see?
  const endDate = moment().locale("en").format("YYYY-MM-DD"); // <-- You see?

  const [fetchStudentSpecificLessons, { loading, error }] = useLazyQuery(
    STUDENT_SPECIFIC_LESSONS_QUERY,
    {
      fetchPolicy: "cache-and-network",
    }
  );

  useEffect(() => {
    if (enrolledProgramId) {
      fetchStudentSpecificLessons({
        variables: {
          program_id: enrolledProgramId,
          start_date: startDate,
          end_date: endDate,
          content_type: "LiveClass",
        },
        onCompleted: (response) => {
          const {
            studentSpecificLessons: { data },
          } = response;

          if (data?.length) {
            const formattedArray = data
              .filter((item) => {
                return moment
                  .utc(item.live_class.end_time)
                  .local(true) // <-- You see?
                  .isAfter(moment.utc());
              })
              .map((item) => {
                const subColor = `#${item.color_code.split(",")[0]}`;
                let status;
                const startTime = moment
                  .utc(item.live_class.start_time)
                  .local(true); // <-- You see?
                const endTime = moment
                  .utc(item.live_class.end_time)
                  .local(true); // <-- You see?
                const currentTime = moment.utc();
                if (currentTime.isBetween(startTime, endTime)) {
                  status = "ongoing";
                } else if (startTime.diff(currentTime, "minutes") > 10) {
                  status = "upcoming";
                } else {
                  status = "ongoing";
                }

                return {
                  lessonId: item.id,
                  contentId: item.content_id,
                  subName: item.live_class.subject_name,
                  subColor: subColor,
                  classType: classTypeDic[item.live_class.type],
                  status: status,
                  title: item.title,
                  chapterName: item.live_class.chapter_name,
                  startTime: moment
                    .utc(item.live_class.start_time)
                    .local(true) // <-- You see?
                    .format("h.mm a"),
                  endTime: moment
                    .utc(item.live_class.end_time)
                    .local(true) // <-- You see?
                    .format("h.mm a"),
                  date: moment
                    .utc(item.live_class.start_time)
                    .local(true) // <-- You see?
                    .format("D MMM, dddd"),
                };
              });

            setStdSpecificLessons(formattedArray);
          }
        },
        onError: (err) => console.log(err),
      });
    }
  }, [enrolledProgramId, startDate, endDate, fetchStudentSpecificLessons]);

  if (loading) return <Skeleton active />;
  if (error) return <SectionError />;
  if (stdSpecificLessons.length === 0) return <Empty />;

  return (
    <>
      <section className="block lg:hidden">
        <Slider {...sliderSettings}>
          {stdSpecificLessons?.map((item) => {
            // eslint-disable-next-line react/jsx-key
            return <TodayClass router={router} {...item} />;
          })}
        </Slider>
      </section>
      <section className="hidden lg:grid grid-cols-12 gap-4">
        {stdSpecificLessons?.map((item) => {
          return (
            <div className="col-span-6 2xl:col-span-4" key={Math.random()}>
              <TodayClass router={router} {...item} />
            </div>
          );
        })}
      </section>
    </>
  );
};

export default TodayClasses;

你可以在上面的代码中看到，对于API调用，我使用了en，而对于显示结果，我使用了bn。顺便说一下，我在主组件之外尝试了moment.locale('bn')，但也不起作用。
我的packages.json看起来像下面：

{
  "name": "landingpage-shikho",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 4001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "fix": "yarn lint --fix",
    "pre-commit": "yarn lint --fix && git add -A ."
  },
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@apollo/client": "^3.3.12",
    "@headlessui/react": "^1.7.3",
    "@phuocng/react-pdf-viewer": "^1.7.0",
    "antd": "^5.3.2",
    "autoprefixer": "^10.2.4",
    "axios": "^0.21.1",
    "cloudinary-core": "^2.11.4",
    "constate": "^3.3.2",
    "date-fns": "^2.23.0",
    "eslint": "^8.33.0",
    "formik": "^2.2.6",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "isomorphic-unfetch": "^3.1.0",
    "jwt-decode": "^3.1.2",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.29.4",
    "next": "^12.1.0",
    "nookies": "^2.5.2",
    "pdfjs-dist": "2.5.207",
    "popper.js": "^1.16.1",
    "postcss": "^8.2.6",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-big-calendar": "^0.35.0",
    "react-countdown": "^2.3.1",
    "react-dom": "^17.0.2",
    "react-hls-player": "^3.0.7",
    "react-loader-spinner": "^4.0.0",
    "react-lottie": "^1.2.3",
    "react-multi-carousel": "^2.6.2",
    "react-player": "^2.11.0",
    "react-responsive": "^9.0.2",
    "react-router-dom": "^6.4.2",
    "react-scroll": "^1.8.1",
    "react-select": "^4.3.0",
    "react-slick": "^0.28.1",
    "react-tooltip": "^4.4.0",
    "react-use-downloader": "^1.2.1",
    "recharts": "2.1.12",
    "sass": "^1.57.1",
    "slick-carousel": "^1.8.1",
    "subscriptions-transport-ws": "^0.9.16",
    "sweetalert2": "^10.15.6",
    "tailwindcss": "^2.1.2",
    "webpack": "^4.0.0",
    "yarn": "^1.22.10"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@svgr/webpack": "^5.5.0",
    "@types/node": "^18.7.14",
    "classnames": "^2.3.1",
    "eslint-config-next": "13.1.6",
    "typescript": "^4.8.2",
    "url-loader": "^4.1.1"
  }
}

next.js Moment locale在构建版本中不起作用，但在本地开发中起作用

1条答案

相关问题

热门标签

最新问答