Cannot find module './traverse' (Next.js + Netlify)

Support
,
1

Hi,

We have a website build using Next.js 10.x and hosting it on netlify. It’s a public repo GitHub - livechat/livechat-public-docs: Source of LiveChat Documentation for Developers website. and a netlify url is https://livechat-public-docs.netlify.app.

We are using an external library called GitHub - Redocly/redoc: 📘 OpenAPI/Swagger-generated API Reference Documentation for OpenAPI format pages.
The library works fine on the client side, however I’m getting a weird error when trying to use it with getStaticProps :

11:00:53 AM:   Error message
11:00:53 AM:   A Netlify Function failed to require one of its dependencies.
11:00:53 AM:   Please make sure it is present in the site's top-level "package.json".
​
11:00:53 AM:   In file "/opt/build/repo/netlify/functions/next_test/next_test.js"
11:00:53 AM:   Cannot find module './traverse' from '/opt/build/repo/netlify/functions/next_test/nextPage/pages'

Link to the logs: Netlify App

import React, { useState, useEffect } from "react";
import { RedocStandalone } from "redoc";
import specs from "../configs/redoc/specs";
import configs from "../configs/redoc/configs";
const fs = require("fs");
const path = require("path");

const Page = ({ content }) => {
  const [showPlaceholder, setShowPlaceholder] = useState(true);

  useEffect(() => {
    setShowPlaceholder(false);
  }, []);

  return (
    <>
      <RedocStandalone
        spec={specs["customer-accounts-api"]}
        options={configs["customer-accounts-api"]}
      />

      {showPlaceholder && (
        <div
          dangerouslySetInnerHTML={{
            __html: content,
          }}
        />
      )}
    </>
  );
};

export async function getStaticProps() {
  const basePath = path.join(process.cwd(), "tmp");
  const filePath = path.join(basePath, "redoc-customer-accounts-api.html");
  const content = fs.readFileSync(filePath, "utf8");

  return {
    props: {
      content,
    },
  };
}

export default Page;

I checked and I’m getting content fine from the file. The whole idea behind this solution is to get content on the first request for SEO purposes.

I’m not sure where this ./traverse issue is coming from and how to fix it.

Thanks.

3

Hiya @JakubSikoraJS and thanks for your patience while we reviewed this with our next.js experts! This was, by the way, a GREAT write-up which contained everything we needed to debug!

As you mention, your codebase seems to have no mentions of this ./traverse reference, but it is our suspicion that one of your dependencies requires it in an interesting way - perhaps within a conditional block, which our default function builder can struggle to understand. If it weren’t seemingly required by relative path, you could potentially just add it to package.json, but we think in this case that won’t help you since requiring the npm package would not satisfy the file-based dependency.

The advice we got was to try our newer esbuild bundling functionality as this might be smart enough to find that include, but even if it isn’t, it is likely to give much better error messaging so you can tell where in the (dependency) code that require statement occurs which might inspire a solution. This blog post describes that functionality - let me know how it goes!

4

Thank you for your reply!

I changed to esbuild and I have a different error, however I can’t find a lot of information how to fix it

8:36:18 AM:  > .netlify/plugins/node_modules/sharp/lib/input.js:5:22: error: No loader is configured for ".node" files: .netlify/plugins/node_modules/sharp/build/Release/sharp.node
8:36:18 AM:     5 │ const sharp = require('../build/Release/sharp.node');
5

Ok I installed sharp and everything seems fine :slight_smile:

Thank you so much!