gatsby: WebpackError: package.json does not exist at /package.json when building with Firebase SDK

I’m seeing this build error in my project after starting to use the Firebase SDK when building (develop works fine), in the static HTML build phase:

  15 | exports.find = function(package_json_path,opts) {
  16 |    if (!existsSync(package_json_path)) {
> 17 |         throw new Error("package.json does not exist at " + package_json_path);
     | ^
  18 |    }
  19 |    var package_json = require(package_json_path);
  20 |    versioning.validate_config(package_json);

  WebpackError: package.json does not exist at /package.json
  
  - pre-binding.js:17 Object.exports.find
    ~/grpc/~/node-pre-gyp/lib/pre-binding.js:17:1
  
  - grpc_extension.js:29 Object.<anonymous>
    ~/grpc/src/grpc_extension.js:29:1
 
  - client.js:38 Object.<anonymous>
    ~/grpc/src/client.js:38:1
  
  - index.js:30 Object.<anonymous>
    ~/grpc/index.js:30:1
 
  - grpc_connection.js:18 Object.<anonymous>
    ~/@firebase/firestore/dist/cjs/src/platform_node/grpc_connection.js:18:1

I spent 2 days searching for answers related to webpack errors with gRPC and node-pre-gyp, came across https://github.com/grpc/grpc/issues/13049 and https://github.com/webpack/webpack/issues/1599 and tried their solutions by adding the following to my gatsby-node.js:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.target = 'node';
    config.externals = ['grpc'];
    config.node = {
      __dirname: false,
      __filename: false,
    };
  }
  return config;
};

But all with no luck. If anyone has any clue, that would be great because right now I’m unable to deploy to production. I even tried a fresh install of Node and NPM to make sure there was no environment issue.

Environment

Gatsby version: 1.9.166 Node.js version: 8.9.4 Operating System: Mac OS

File contents:

gatsby-config.js: pathPrefix: '/admin' package.json:

  "dependencies": {
    "@devexpress/dx-react-core": "^1.0.0-rc.1",
    "@devexpress/dx-react-grid": "^1.0.0-rc.1",
    "@devexpress/dx-react-grid-material-ui": "^1.0.0-rc.1",
    "firebase": "^4.9.0",
    "gatsby": "^1.9.166",
    "gatsby-link": "^1.6.34",
    "gatsby-plugin-react-helmet": "^2.0.4",
    "jss": "^9.5.1",
    "material-ui": "^1.0.0-beta.30",
    "material-ui-icons": "^1.0.0-beta.17",
    "moment": "^2.20.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-firebaseui": "^1.0.10",
    "react-helmet": "^5.2.0",
    "react-jss": "^8.2.1"
  },
  "scripts": {
    "build": "gatsby build --prefix-paths",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "aws-sdk": "^2.186.0",
    "prettier": "^1.10.2"
  }

Steps to reproduce

1. Create new Gatsby project
2. Add Firebase SDK
3. Require firebase/firestore in project