Module not found: Can’t resolve ‘fs’ in Next.js application

by

If you use fs, be sure it’s only within getInitialProps or getServerSideProps. (anything includes server-side rendering).

You may also need to create a next.config.js file with the following content to get the client bundle to build:

For webpack4

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

For webpack5

module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

Note: for other modules such as path, you can add multiple arguments such as

{
  fs: false,
  path: false
}

More Related Contents:

  1. Why are cookies not sent to the server via getServerSideProps in Next.js?
  2. Create a HOC (higher order component) for authentication in Next.js
  3. Next.js: How to get static assets from within getStaticProps
  4. Next.js: document is not defined
  5. React + Material-UI – Warning: Prop className did not match
  6. React-router with BrowserRouter / browserHistory doesn’t work on refresh
  7. Error message “error:0308010C:digital envelope routines::unsupported”
  8. Internal API fetch with getServerSideProps? (Next.js)
  9. ‘npm start’ returns error: “There might be a problem with the project dependency tree”
  10. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  11. How to close a readable stream (before end)?
  12. Get file name from absolute path in Nodejs?
  13. How to build a production version of React without minification?
  14. How to send email from my react web application
  15. Error: How to serialize data from getStaticProps : Next.js
  16. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  17. Get all files recursively in directories NodejS
  18. unable to deploy next js to azure
  19. Jest gives `Cannot find module` when importing components with absolute paths
  20. React app error: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
  21. Material-UI Rendering Bugs in production / build
  22. Can’t resolve ‘fs’ using webpack and react
  23. Get version number from package.json in React Redux (create-react-app)
  24. How to organise file structure of backend and frontend in MERN
  25. How to fix “FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory” error
  26. How to detect window size in Next.js SSR using react hook?
  27. React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
  28. One project with multiple package.json files
  29. Unable to deploy React JS application on Azure App service
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment