It might be that the module you are trying to implement is not supposed to run in a browser. I.e. it's server-side only.

fs,path or other node native modules can be used only inside server-side code, like "getServerSide" functions. If you try to use it in client you get error even you just console.log it.. That console.log should run inside server-side functions as well.

When you import "fs" and use it in server-side, next.js is clever enough to see that you use it in server-side so it wont add that import into the client bundle

One of the packages that I used was giving me this error, I fixed this with

module.exports = {
 
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false
    }

    return config
  },
  
}

but this was throwing warning on terminal:

"Critical dependency: require function is used in a way in which

 dependencies cannot be statically extracted"

Then I tried to load the node module on the browser. I copied the "min.js" of the node module from the node_modules and placed in "public/js/myPackage.js" and load it with Script

export default function BaseLayout({children}) {
  return (
    <>
      <Script
        // this in public folder
        src="/js/myPackage.js"
        // this means this script will be loaded first
        strategy="beforeInteractive"
      />
    </>
  )
}

This package was attached to window object and in node_modules source code's index.js:

if (typeof window !== "undefined") {
  window.TruffleContract = contract;
}

So I could access to this script as window.TruffleContract. BUt this was not an efficient way.

If trying to use fs-extra in Next.js, this worked for me

module.exports = {
  webpack: (config) => {
    config.resolve.fallback = { fs: false, path: false, stream: false, constants: false };
  }
}

I spent hours on this and the solution is also here on Stackoverflow but on different issue -> https://stackoverflow.com/a/67478653/17562602

Hereby I asked for MOD permission to reshare this, since this issue is the first one to show up on Google and probably more and more people stumble would upon the same problem as I am, so I'll try to saved them some sweats

Soo, You need to add this in your next.config.js

    module.exports = {
  future: {
    webpack5: true, // by default, if you customize webpack config, they switch back to version 4. 
      // Looks like backward compatibility approach.
  },
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
        // by next.js will be dropped. Doesn't make much sense, but how it is
      fs: false, // the solution
    };

    return config;
  },
};

It works for like a charm for me

I got this error in my NextJS app because I was missing export in

export function getStaticProps()

I had the same issue when I was trying to use babel.

For me this worked:

#add a .babelrc file to the root of the project and define presets and plugins (in my case, I had some issues with the macros of babel, so I defined them)

{
    "presets": ["next/babel"],
    "plugins": ["macros"]
}

after that shut down your server and run it again

I had this exact issue. My problem was that I was importing types that I had declared in a types.d.ts file.

I was importing it like this, thanks to the autofill provided by VSCode.

import {CUSTOM_TYPE} from './types'

It should have been like this:

import {CUSTOM_TYPE} from './types.d'

In my case, I think the .d was unnecessary so I ended up removing it entirely and renamed my file to types.ts.

Weird enough, it was being imported directly into index.tsx without issues, but any helper files/functions inside the src directory would give me errors.

For me, the problem was the old version of the node.js installed. It requires node.js version 14 and higher. The solution was to go to the node.js web page, download the latest version and just install it. And then re-run the project. All worked!

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
}

For me clearing the cache npm cache clean -f

and then updating the node version to the latest stable release(14.17.0) worked