Gatsby: Error "This dependency was not found" when using Advanced proxying example

[ahmedelgabri]

Description

Running gatsby build after following the example here https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying throws this error.

The error is because of this line https://github.com/here-be/snapdragon/blob/82fb20dc905ac0e22061ffaabaced311f296d4cd/lib/source-maps.js#L3 which is just requiring the fs module so I assume the error might be webpack related if gatsby-config.js is passed through it.

Steps to reproduce

reproducable in this branch https://github.com/ahmedelgabri/gabri.me/tree/gastby-proxy-error-10754 & this is the commit to add the proxy server https://github.com/ahmedelgabri/gabri.me/commit/41d8634ec563150ab2d5b70f9913b20797420a3f

Expected result

To work properly & not throw this error

Actual result

ℹ ｢wdm｣: Compiling...
 ERROR  Failed to compile with 1 errors                           5:32:05 PM

This dependency was not found:

* fs in ./node_modules/snapdragon/lib/source-maps.js

To install it, you can run: npm install --save fs
✖ ｢wdm｣:
ERROR in ./node_modules/snapdragon/lib/source-maps.js
Module not found: Error: Can't resolve 'fs' in '/Users/ahmed/Sites/personal/dev/gabrime/node_modules/snapdragon/lib'
 @ ./node_modules/snapdragon/lib/source-maps.js 3:9-22
 @ ./node_modules/snapdragon/lib/compiler.js
 @ ./node_modules/snapdragon/index.js
 @ ./node_modules/micromatch/lib/utils.js
 @ ./node_modules/micromatch/index.js
 @ ./node_modules/http-proxy-middleware/lib/context-matcher.js
 @ ./node_modules/http-proxy-middleware/lib/index.js
 @ ./node_modules/http-proxy-middleware/index.js
 @ ./gatsby-config.js
 @ ./gatsby-browser.js
 @ ./.cache/api-runner-browser-plugins.js
 @ ./.cache/api-runner-browser.js
 @ ./.cache/app.js
 @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

Environment

  System:
    OS: macOS 10.14.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.6.2 - /usr/local/bin/zsh
  Binaries:
    Node: 11.6.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Languages:
    Python: 3.7.2 - /usr/local/opt/python/libexec/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0.3
    Safari: 12.0.2
  npmPackages:
    gatsby: 2.0.79 => 2.0.79 
    gatsby-mdx: 0.2.0 => 0.2.0 
    gatsby-plugin-emotion: 2.0.7 => 2.0.7 
    gatsby-plugin-feed: 2.0.11 => 2.0.11 
    gatsby-plugin-klipse: 2.1.0 => 2.1.0 
    gatsby-plugin-netlify: 2.0.6 => 2.0.6 
    gatsby-plugin-react-helmet: 3.0.5 => 3.0.5 
    gatsby-plugin-remove-serviceworker: 1.0.0 => 1.0.0 
    gatsby-plugin-sitemap: 2.0.4 => 2.0.4 
    gatsby-plugin-twitter: 2.0.8 => 2.0.8 
    gatsby-plugin-typescript: 2.0.3 => 2.0.3 
    gatsby-remark-copy-linked-files: 2.0.8 => 2.0.8 
    gatsby-remark-prismjs: 3.2.0 => 3.2.0 
    gatsby-remark-responsive-iframe: 2.0.8 => 2.0.8 
    gatsby-remark-smartypants: 2.0.7 => 2.0.7 
    gatsby-source-filesystem: 2.0.12 => 2.0.12 

I'm also using yarn not npm

[sidharthachatterjee]

Hey @ahmedelgabri

Just tried this out and I'm able to reproduce this issue

This is happening because of https://github.com/ahmedelgabri/gabri.me/blob/41d8634ec563150ab2d5b70f9913b20797420a3f/gatsby-browser.js#L4

That leads to gatsby building the browser build with const proxy = require('http-proxy-middleware') which fails because fs isn't available in the browser

Removing the require to gatsby-config in gatsby-browser should fix this

[ahmedelgabri]

@sidharthachatterjee thanks for the help, I managed to fix the issue now.