how to solve the error that fs module is not found when used react and next.js

Question

Am using a react application without router settings. I want to build my sitemap.xml file. I tried some modules like sitemap.js, react-router-sitemap, sitemap-generator. But these module are throwing error as fs module is missing. I installed fs module via npm install --save. But it is still showing the error.

I found in some forums to add the below code in webpack.config file.

node: { fs: "empty" } Am not sure where this file is. I couldn't find them nside the sitemap related modules.

Please help me to resolve this. Am new to react.

Here is my folder structure.

Answer 1

create next.config.js and put below code. It works fine for me.

next.config.js

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
      // Note: we provide webpack above so you should not `require` it
      // Perform customizations to webpack config
      // Important: return the modified config

      // Example using webpack option
      //config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
      config.node = {fs:"empty"}
      return config
    },
    webpackDevMiddleware: config => {
      // Perform customizations to webpack dev middleware config
      // Important: return the modified config
      return config
    },
  }