Next.js: Module not found: Can't resolve 'fs in node_modules/destroy

[jrusso1020]

Bug report

After upgrading to Next 9.1.6 I am having a problem running my next js server locally. I get

[ error ] ./node_modules/destroy/index.js
Module not found: Can't resolve 'fs' in '**/node_modules/destroy'

When running npm run dev, however this change seems to be working fine in production it just happens locally when running the hot reloading server

Describe the bug

^^ Look at above description

I think it might possibly have to do with this change. We are no longer requiring fs in the hot reloader https://github.com/zeit/next.js/commit/fd95d6c8bc3c6e89cdf8f84b11146bf86e377ee0#diff-6161346d2c5f4b7abc87059d8768c44bL1

To Reproduce

Edit:
Clone this repo https://github.com/iteratelabs/next-not-working
use node version 10.15.3
npm install
run the command npm run dev and you should get a module not found error.

Expected behavior

Expected behavior is for the development server to still run the web application after upgrading.

Screenshots

System information

• OS: macOS
• Version of Next.js: 9.1.6

Additional context

EDIT: I downgraded to 9.1.5 and still get the same error however. Was not getting this error previously though until today

I took a look at this issue https://github.com/zeit/next.js/issues/7755 and added

if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

to my webpack config but then I got the following error

[ error ] ./node_modules/express/lib/request.js
Module not found: Can't resolve 'net' in '**/node_modules/express/lib'

So now I have

if (!isServer) {
      config.node = {
        fs: 'empty',
       net: 'empty'
   }
}

Which allows me to build the webapp and run it in the development server but I get this warning

[ warn ]  ./node_modules/express/lib/view.js
Critical dependency: the request of a dependency is an expression

[timneutkens]

Sounds like you're doing something wrong in your app which ends up importing all of next.js and then tries to bundle it. Please always provide a full reproduction when creating issues as it's really hard to tell now.

[jrusso1020]

Hi @timneutkens sorry for the generic description, I've tried to create a slightly stripped down repo and posted it here https://github.com/iteratelabs/next-not-working for you to see publicly. As well as updated the reproduction steps

We haven't made any changes where we would be importing all of next.js and creating this error

[timneutkens]

Cool, thanks! Will have a look later.

[kishanio]

@timneutkens facing the same issue. Seems like somethings broke in Next.JS dependency tool chain.

Encountered this after fresh npm i

[ohana54]

It's probably due to https://github.com/wix/sentry-testkit/issues/43
Please read the proposed solution there, as the testkit is not meant to be loaded in a browser environment.

[jrusso1020]

can confirm that our issue was related to the sentry package problem, one of our developers figured this out yesterday.

Should the next example with sentry https://github.com/zeit/next.js/tree/canary/examples/with-sentry be updated perhaps? We originally followed this to implement sentry but it seems going forward with newer versions of sentry this will no longer work as is

[ohana54]

@jrusso1020 IMO the next example should be updated with the alternative solution I suggested in the other ticket, copy pasting here:

if (process.env.NODE_ENV !== 'production') {
    // Don't actually send the errors to Sentry
    sentryOptions.beforeSend = () => null

    // Instead, dump the errors to the console
    sentryOptions.integrations = [
      new SentryIntegrations.Debug({
        // Trigger DevTools debugger instead of using console.log
        debugger: false,
      }),
    ]
  }

  Sentry.init(sentryOptions)

This doesn't use the testkit at all.

[jrusso1020]

@ohana54 I agree, I have changed my code to the code you suggested and my next js app is working in development mode again.

I can open up a PR with the changes

[VaidyaKautilya]

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\JSFullSTtack\Mininstaa\node_modules\destroy'
@ ./node_modules/destroy/index.js 14:17-30
@ ./node_modules/send/index.js
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./frontend-js/modules/search.js
@ ./frontend-js/main.js

ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\JSFullSTtack\Mininstaa\node_modules\etag'
@ ./node_modules/etag/index.js 22:12-25
@ ./node_modules/express/lib/utils.js
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./frontend-js/modules/search.js
@ ./frontend-js/main.js

ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in 'D:\JSFullSTtack\Mininstaa\node_modules\express\lib'
@ ./node_modules/express/lib/view.js 18:9-22
@ ./node_modules/express/lib/application.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./frontend-js/modules/search.js
@ ./frontend-js/main.js

ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in 'D:\JSFullSTtack\Mininstaa\node_modules\mime'
@ ./node_modules/mime/mime.js 2:9-22
@ ./node_modules/send/index.js
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./frontend-js/modules/search.js
@ ./frontend-js/main.js

ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\JSFullSTtack\Mininstaa\node_modules\send'
@ ./node_modules/send/index.js 23:9-22
@ ./node_modules/express/lib/response.js
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./frontend-js/modules/search.js
@ ./frontend-js/main.js

ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'net' in 'D:\JSFullSTtack\Mininstaa\node_modules\express\lib'
@ ./node_modules/express/lib/request.js 18:11-25
@ ./node_modules/express/lib/express.js
@ ./node_modules/express/index.js
@ ./frontend-js/modules/search.js
@ ./frontend-js/main.js

[Coyas]

I have this problem too
i try this:

webpack: (config, { isServer }) => {
        // Fixes npm packages that depend on 'fs' module
        if (!isServer) {
            config.node = {
                fs: "empty", // when i put this line i get the 'net' error
                net: "empty" // then i put the 'net' line
            };
        }

        return config;
    }

but @jrusso1020 my console doesn't show the warning that you say appears in yours:
[ warn ] ./node_modules/express/lib/view.js Critical dependency: the request of a dependency is an expression

It appears only when I have the dynamic routes " [id].js " and show me this error:

Unhandled Runtime Error

TypeError: http.ServerResponse is undefined

this is a nightmare, there is a real and official solution for this problem??

[BigSully]

Same issue with the author, and we've used npm run dev for quite a long time before we discovered the cause.
The cause is that we have put some non-page js files in the pages directory. The issue disappeared after we removed all files and directories in the pages except a simple hello.js of content export default () => <div>hello</div>.
Now we still put those non-page code in the pages directory, but with a different file suffix .jx, which wouldn't be treated as pages by the next.js any more. The .jx file can still be imported by the node file system.

[modbender]

I got this problem when I was converting function to class element vc code accidentally auto imported import { render } from "node-sass";

[sk3106]

Same issue with the author, and we've used npm run dev for quite a long time before we discovered the cause.
The cause is that we have put some non-page js files in the pages directory. The issue disappeared after we removed all files and directories in the pages except a simple hello.js of content export default () => <div>hello</div>.
Now we still put those non-page code in the pages directory, but with a different file suffix .jx, which wouldn't be treated as pages by the next.js any more. The .jx file can still be imported by the node file system.

This worked for me on the latest version of Next JS. I had to move serverless-mysql db.js file from pages directory and it worked. I could not find any solution until I saw your answer, thank you for sharing this.

[yashwant-dangi]

i was getting the same error, but it was due to my mistake, since i am using axios for network request, but a some point in my app i typed response and pressed enter and intellisense imported import {response} from 'express', as soon as i removed this line, my code starts working again. you should check your code first in case of imports errors.

[simonhaenisch]

Just got the same error when I was importing an object in a front-end page but the object was defined in an API route which includes server-side imports. Solution was to export the object from its own file so the (unrelated) imports wouldn't get in the way.

Might be a common mistake which is why I'm dropping this here as one possible solution. The error message could definitely be more helpful about which import exactly is causing the trouble 😅 Here's what it looks like with [email protected]:

event - build page: /preferences
wait  - compiling...
error - ./node_modules/destroy/index.js:14:0
Module not found: Can't resolve 'fs'
null