时间戳

首页 > 解决方案 > Next-offline 构建动态路由失败

javascript - Next-offline 构建动态路由失败

问题描述

我正在使用 next-offline 制作 PWA nextjs 应用程序。但是，当我尝试构建它并将其导出为文档时，它无法构建我的 [id].js 动态页面。显示错误消息，如：

预渲染页面“/movies/[id]”时发生错误：TypeError：无法读取未定义的属性“地图”

有没有什么办法解决这一问题。我想我需要在 getInitialProps 中做点什么，因为它是获取数据的地方

    import Link from "next/link";
    import Head from "next/head";
    import Oops from "../../components/Oops";
    import Image from "../../components/Image";

    import { getMovieDetails, getImageSrc } from "../../utils/apiCalls";

    import Layout from "../../components/Layout";

    const Movie = ({ title, poster_path, rating, overview, genres, cast, error }) =>
  error ? (
    <div className="movie">
      <Oops />
    </div>
  ) : (
    <Layout noOffline={true}>
      <div className="movie">
        <Head>
          <title>{title} | Movies PWA</title>
        </Head>
        <div className="card">
          <div className="card-header">
            <div className="card-title h3 text-primary">{title}</div>
            <div className="card-subtitle text-gray">Rating - {rating}</div>
            <div className="chips">
              {genres.map(({ id, name }) => (
                <div key={id} className="chip">
                  {name}
                </div>
              ))}
            </div>
          </div>
          <div className="card-image">
            <Image
              src={getImageSrc(poster_path, 500)}
              alt={`Poster for ${title}`}
              className="img-responsive"
            />
          </div>
          <div className="card-body">
            <div className="card-title h4">Overview</div>
            <div className="card-subtitle">{overview}</div>
            <div className="card-title h4">Cast</div>
            <div className="cast">
              {cast.map(({ credit_id, profile_path, name }) =>
                profile_path ? (
                  <figure
                    key={credit_id}
                    className="avatar avatar-xl tooltip"
                    data-tooltip={name}
                  >
                    <Image src={getImageSrc(profile_path, 92)} alt={name} />
                  </figure>
                ) : null
              )}
            </div>
          </div>
          <div className="card-footer btn-group btn-group-block">
            <Link href="/movies">
              <a className="btn btn-primary">Back to Movies</a>
            </Link>
          </div>
        </div>
      </div>
    </Layout>
  );

Movie.getInitialProps = async ({ query: { id } }) => {
  const res = await getMovieDetails(id);
  if (res.error || !res.original_title) return res;

  const {
    poster_path,
    overview,
    genres,
    credits: { cast },
    vote_average,
    original_title
  } = res;

  return {
    title: original_title,
    poster_path,
    rating: vote_average,
    overview,
    genres,
    cast: cast.filter((c, i) => i < 5)
  };
};

export default Movie;

复制“静态构建”目录启动 3 个工作人员复制“公共”目录 [==] 导出 (1/6) 预渲染页面“/movies/[id]”发生错误：TypeError：无法读取未定义的属性“地图”

标签： javascriptreactjsprogressive-web-appsnext.js

解决方案

推荐阅读