title: How to solve NextJs Error: Failed to load / at loadComponents
body: <p>I initialized a NextJs app(v10.2.0) via <code>npx create-next-app</code> and replcaced below code in <code>index.js</code> file of the <code>pages folder</code>.
  I am trying to fetch data from a json file and then pass it as props to the page component.</p>
  <pre><code>import fs from 'fs/promises';
  import path from 'path';
  
  function Home(props) {
    const { products } = props;
  
    return (
      &lt;ul&gt;
        {products.map((product) =&gt; {
          return &lt;li key={product.id}&gt;{product.title}&lt;/li&gt;;
        })}
      &lt;/ul&gt;
    );
  }
  
  
  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;
  </code></pre>
  <p>And the <code>products-data.json</code> file is:</p>
  <pre><code>{
      &quot;products&quot;: [{
              &quot;id&quot;: &quot;p1&quot;,
              &quot;title&quot;: &quot;Product 1&quot;
          }, {
              &quot;id&quot;: &quot;p2&quot;,
              &quot;title&quot;: &quot;Product 2&quot;
          },
          {
              &quot;id&quot;: &quot;p3&quot;,
              &quot;title&quot;: &quot;Product 3&quot;
          }
      ]
  }
  </code></pre>
  <p>But when i run the <code>npm run dev</code>, i get this error:</p>
  <pre><code>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)
  </code></pre>
  <p>What is the problem with this code? is it because of importing core node modules?</p>