如何解决 NextJs Error: Failed to load / at loadComponents答案

【问题标题】：How to solve NextJs Error: Failed to load / at loadComponents如何解决 NextJs Error: Failed to load / at loadComponents
【发布时间】：2021-08-05 13:12:02
【问题描述】：

我通过npx create-next-app 初始化了一个NextJs 应用程序(v10.2.0)，并在pages folder 的index.js 文件中替换了下面的代码。我正在尝试从 json 文件中获取数据，然后将其作为道具传递给页面组件。

import fs from 'fs/promises';
import path from 'path';

function Home(props) {
  const { products } = props;

  return (
    <ul>
      {products.map((product) => {
        return <li key={product.id}>{product.title}</li>;
      })}
    </ul>
  );
}


export async function getStaticProps() {

  const filePath = path.join(process.cwd(), 'data', 'products-data.json');
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData);

  console.log(data);

  return {
    props: {
      products: data.products
    }
  };
}

export default Home;

products-data.json 文件是：

{
    "products": [{
            "id": "p1",
            "title": "Product 1"
        }, {
            "id": "p2",
            "title": "Product 2"
        },
        {
            "id": "p3",
            "title": "Product 3"
        }
    ]
}

但是当我运行npm run dev 时，我得到了这个错误：

Error: Failed to load /
    at loadComponents (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/load-components.js:1:1554)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async DevServer.findPageComponents (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:76:257)
    at async DevServer.renderToHTML (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:137:542)
    at async DevServer.renderToHTML (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/server/next-dev-server.js:36:578)
    at async DevServer.render (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:74:255)
    at async Object.fn (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:58:672)
    at async Router.execute (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:68:1042)
    at async DevServer.handleRequest (/home/ali/Desktop/NextJs3/nextjs3/node_modules/next/dist/next-server/server/next-server.js:32:504)

这段代码有什么问题？是因为导入了核心节点模块吗？

【问题讨论】：

标签： next.js

【解决方案1】：

一旦我将基于 Promise 的 readFile() 版本更改为 readFileSync()，它就起作用了 :) 不知道为什么，但它有效！

部分代码已编辑：

import fs from 'fs';
.
.
.
const jsonData = fs.readFileSync(filePath);
.
.
.

但无法弄清楚在这种情况下如何使用readFile 的异步版本。

【讨论】：