Module not found: Can't resolve 'fs'

[ddresch]

I'm trying to add outstatic to an existing project. Which is somewhat working. I can access the editor and also the collection creation is running. Currently, I'm struggling with the following issue:

./node_modules/.pnpm/[email protected]_3591a07f5f6bd7e95d5c3230e32ada50/node_modules/outstatic/dist/utils/server.js:1:716
Module not found: Can't resolve 'fs'

Import trace for requested module:
./pages/offers/[slug].jsx

It is the copy of the [slug].tsx page of the blog example, so nothing new or special.

I can get rid of the error if I modify my next.config.js like that:

config.resolve.fallback = {
      ...config.resolve.fallback, 
      fs: false
};

But I get now paths or an empty array in the getStaticPaths method:

export async function getStaticPaths() {
  console.log(getDocumentPaths('offers')) // returns empty array
  return {
    paths: getDocumentPaths('offers'),
    fallback: false
  }
}

I'm pretty stuck cause with the empty array it is not dropping an error, but it is ending up constantly in 404 errors of existing pages.

[avitorio]

Hi @ddresch,

Can you inform me your next, react and outstatic versions? Woukd it also be possible to share your [slug] file? Thanks.

[ddresch]

Thanks for this quick response!

    "next": "^13.0.0",
    "outstatic": "^0.0.32-rc",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",

The [slug] file is a copy of the blog example.

[avitorio]

Try upgrading outstatic to the latest version. Let me know if it works.

But I've seen this error before, usually it's because 'fs' should only be called on the server side. Somehow it seems the call is being made in the browser... did you change anything in the [slug] file?

[ddresch]

Updated to latest version 0.0.33 and copied [slug].tsx again, so no difference. The fs module not found error is gone, but still the getDocumentPaths method returns an empty array and I end up with 404 errors.

[avitorio]

Are there any documents inside your /offers folder?

[avitorio]

As a side note, I just cloned the example project (deploy with vercel), and changed the values to reflect your package.json versions and was unable to replicate the fs not found error.

[avitorio]

Hey @ddresch, I'm closing this due to inactivity. Let me know if you need further help.

[narendran-kannan]

I'm also getting the same issue in 0.0.33-rc version

[ddresch]

@narendran-kannan did you add outstatic to an already existing project? For me, the 0.0.33-rc closed the issue of not finding the 'fs' module, but it's still not working. But still, the getDocumentPaths method returns an empty array. I checked the code it searches for .mdx files, so I renamed the xyz.md files created by outstatic, but still no luck.

[avitorio]

Hi @ddresch and @narendran-kannan, I'd love to be able to reproduce the error to help you find a solution. Would you be able to create an example repository with a minimal install of your current setup to see if I can help? Thanks in advance.

[narendran-kannan]

I've added outstatic on existing nextjs project, This is solved when I add below code in next.config file

const nextConfig = {
  reactStrictMode: false,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };
    return config;
  }
}

module.exports = nextConfig

[narendran-kannan]

I think this is because we've used fs in pages/ folder, not api/? Correct me If I'm wrong?

[avitorio]

But the pages folder only uses fs inside the server side functions... this is why I don't get the error.

What version of NodeJs are you using?

[narendran-kannan]

18.9.0

[avitorio]

Can you create a repo with a simplified version of your project and share it with me?

[narendran-kannan]

Hey @avitorio as I mentioned below, now it is resolved after adding this in the config, still, need a repo? Let me know, will do.

I've added outstatic on existing nextjs project, This is solved when I add below code in next.config file

const nextConfig = {
  reactStrictMode: false,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };
    return config;
  }
}

module.exports = nextConfig

[avitorio]

@narendran-kannan, yes, a repo with the issue would be nice as I'd like to figure out what is the difference in setup that makes some installs work without that config...

[ddresch]

I also used this config setting in the first place, which I don't need to use anymore with the updated version 0.33-rc. But still, I get 404 errors in frontend for .mdx pages which are available in outstatic/content/xyz. I compared my site with the blog example up and down and can't find any differences. There needs to be a minor tweak which is missing.

[avitorio]

Hey @ddresch, I noticed our support for .mdx is limited, so this might be why you are getting this error. I've started a new issue for this here #73. Let me know if you'd be interested in helping us out with it. Thanks!