"Module not found: Error: Can't resolve 'fs'" during build with gatsby.js

[mateodelnorte]

I'm getting the following errors when attempting to build, using gatsby.js:

 ERROR  Failed to compile with 2 errors                                                                                     10:21:39 AM

These dependencies were not found:

* fs in ./node_modules/youtube-player/node_modules/debug/src/node.js
* net in ./node_modules/youtube-player/node_modules/debug/src/node.js

To install them, you can run: npm install --save fs net
✖ ｢wdm｣:
ERROR in ./node_modules/youtube-player/node_modules/debug/src/node.js
Module not found: Error: Can't resolve 'fs' in '/Users/matt/development/yang/gatsby-universal/node_modules/youtube-player/node_modules/debug/src'
 @ ./node_modules/youtube-player/node_modules/debug/src/node.js 186:15-28
 @ ./node_modules/youtube-player/node_modules/debug/src/index.js
 @ ./node_modules/youtube-player/dist/YouTubePlayer.js
 @ ./node_modules/youtube-player/dist/index.js
 @ ./node_modules/react-youtube/dist/YouTube.js
 @ ./src/components/modal/modal.js
 @ ./src/containers/modal/modal.js
 @ ./src/pages/index.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/youtube-player/node_modules/debug/src/node.js
Module not found: Error: Can't resolve 'net' in '/Users/matt/development/yang/gatsby-universal/node_modules/youtube-player/node_modules/debug/src'
 @ ./node_modules/youtube-player/node_modules/debug/src/node.js 193:16-30
 @ ./node_modules/youtube-player/node_modules/debug/src/index.js
 @ ./node_modules/youtube-player/dist/YouTubePlayer.js
 @ ./node_modules/youtube-player/dist/index.js
 @ ./node_modules/react-youtube/dist/YouTube.js
 @ ./src/components/modal/modal.js
 @ ./src/containers/modal/modal.js
 @ ./src/pages/index.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

[tjallingt]

Seems to be an issue with HRM, webpack or Gatsby. The debug package is an indirect devDependency used by webpack-dev-server, babel, eslint and more. The only way you can reference it is by running our build scripts (which you shouldn't have to).

Not sure what's going on as I'm not familiar enough with Gatsby.

[kiborrdis]

Had the same problem, but with rollup build. In my case problem was that rollup wasnt respecting browser field in package.json which points to version of package for browser and being used by debug package. I solved it via providing additional params to rollup-plugin-node-resolve. I believe Gatsby should have something similar.

Small addition to explain why it being imported in the first place. debug package is being used by youtube-player, so it's ok that it's being referenced during build

[mrlubos]

Hey, just wanted to comment I have no issues with Gatsby 2.3.17!

[paullewisn]

Exactly the same problem here, using webpack and nextjs.

[paullewisn]

The problem thrown up with nextjs is due to severside vs clientside execution of fs (and others). This fixes it in next.config.js but it was met with some abrasion in PR:

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

        return config
    }