Nextjs getStaticProps 未触发

Question

下面我的 [slug].js 文件有两个 nextjs 辅助函数。getStaticPaths 和 getStaticProps 已导出。就我而言，它创建了路径posts/[slug]。添加了一个名为hello.json. 现在，当我导航到localhost:3000/posts/hello它时，错误提示：

TypeError: Cannot read property 'fileRelativePath' of undefined。对于10号线。

看到jsonFile未定义后，这是有道理的。事实上，整个过程getStaticProps从未被调用，那里的登录也从未被记录。为什么会发生这种情况？

提前致谢。

import React from 'react';

import glob from 'glob';

import { usePlugin } from 'tinacms';

import { useJsonForm } from 'next-tinacms-json';

const Page = ({ jsonFile }) => {

    console.log(121212, jsonFile);

    // Create the tina form

    const [post, form] = useJsonForm(jsonFile);

    // Register it with the CMS

    usePlugin(form);

    return (

        <h1>

            {post.title}

        </h1>

    );

};

export default Page;

/**

 * By exporting the async function called getStaticProps from a page, Next.js

 * pre-renders this page at build time using the props returned by

 * getStaticProps.

 * The getStaticPaths function defines a list of paths that have

 * to be rendered to HTML at build time.

 */

export async function getStaticProps({ ...ctx }) {

    console.log(1212, ctx);

    const { slug } = ctx.params;

    const dynamicPath = `../../posts/${slug}.json`; // for eslint parsing error: "Cannot read property 'range' of null Occurred while linting"

    const content = await import(dynamicPath);

    console.log(121212, content);

    return {

        props: {

            jsonFile: {

                fileRelativePath: `/posts/${slug}.json`,

                data: content.default,

            },

        },

    };

}

export async function getStaticPaths() {

    //get all .json files in the posts dir

    const posts = glob.sync('posts/**/*.json');

    const paths = posts.map(file => ({

        params: {

            slug: `${file.replace('.json', '')}`,

        },

    }));

    return {

        paths,

        fallback: true,

    };

};

Answer 1

经过更多的挖掘后，我发现了这个问题，在这里发布希望可以帮助未来的读者解决同样的问题。罪魁祸首是这样的：const dynamicPath = `../../posts/${slug}.json`; // for eslint parsing error: "Cannot read property 'range' of null Occurred while linting"const content = await import(dynamicPath);在动态导入中使用变量不起作用，只能使用字符串或模板文字。我使用了一个变量，因为 eslint 解析错误，只能通过降级到早期版本的 eslint 来解决。这会导致 eslint 在这个文件中无法为我工作，但是没关系，至少该函数被调用了。这与在调用之前调用组件代码的观察相结合，getStaticProps使得 jsonFile 变量未定义，并且整个组件在到达getStaticProps. 您可以看到以 开头的日志121212早于1212。终端日志：121212 {&nbsp; fileRelativePath: 'posts/hello.json',&nbsp; data: { title: 'Not the actual data' }}1212 hello这对我来说是违反直觉的，因为我认为它会首先获取道具并立即将它们传递给组件，但遗憾的是，需要定义默认道具来解决这个问题。新代码：import React from 'react';import glob from 'glob';import { usePlugin } from 'tinacms';import { useJsonForm } from 'next-tinacms-json';const Page = ({ jsonFile }) => {&nbsp; &nbsp; console.log(121212, jsonFile);&nbsp; &nbsp; // Get content and form for Tina&nbsp; &nbsp; const [content, form] = useJsonForm(jsonFile);&nbsp; &nbsp; // Register it with the CMS&nbsp; &nbsp; usePlugin(form);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {content.title}&nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; );};Page.defaultProps = {&nbsp; &nbsp; jsonFile: {&nbsp; &nbsp; &nbsp; &nbsp; fileRelativePath: 'posts/hello.json',&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'Not the actual data',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },};export default Page;/**&nbsp;* By exporting the async function called getStaticProps from a page, Next.js&nbsp;* pre-renders this page at build time using the props returned by&nbsp;* getStaticProps.&nbsp;*/export async function getStaticProps({ params: { slug } }) {&nbsp; &nbsp; console.log(1212, slug);&nbsp; &nbsp; // This line caused the issue&nbsp; &nbsp; // const dynamicPath = (`../../posts/${slug}.json`; // for eslint parsing error: "Cannot read property 'range' of null Occurred while linting"&nbsp; &nbsp; const content = await import(`../../posts/${slug}.json`);&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; props: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jsonFile: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fileRelativePath: `posts/${slug}.json`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: content.default,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; };}/**&nbsp;* The getStaticPaths function defines a list of paths that have&nbsp;* to be rendered to HTML at build time.&nbsp;*/export async function getStaticPaths() {&nbsp; &nbsp; //get all .json files in the posts dir&nbsp; &nbsp; const posts = glob.sync('posts/**/*.json');&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; paths: posts.map(file => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; params: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slug: `${file.replace('.json', '')}`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; })),&nbsp; &nbsp; &nbsp; &nbsp; fallback: true,&nbsp; &nbsp; };}