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

[gvillenave]

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 grpc/grpc#13049 and webpack/webpack#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

[KyleAMathews]

Yeah, the problem is your code is trying to run code that calls node.js APIs e.g. existsSync which don't exist in the browser or when building a site.

I haven't used Firebase much but I'm guessing you're requiring the wrong module. There should be one that's designed for using in frontend code.

[gvillenave]

@KyleAMathews No, the Firebase client JS SDK is made for use in the browser, and I have used it in other projects (including next.js projects) where this is not an issue.
https://github.com/firebase/firebase-js-sdk
Please do re-open this issue, I believe this is an actual use case for Gatsby that doesn't work in production, although it might just be related to a specific webpack config problem. Firestore is pretty new and has the dependency on gRPC, and it is probably the reason for this issue, but eventually Gatsby should be able to support this.

[gvillenave]

I ended up switching back to create-react-app for now, with the same code and dependencies and the webpack bundling is working fine. I would be interested to eventually switch back to Gatsby if I can get some help making it work with Firebase.

[KyleAMathews]

It could just be that we're still on webpack v1 until Gatsby v2 is released.

[willcode4food]

I am trying to solve this problem as Firestore and Gatsby are going to give me the best results for my use case.

I've been looking at this for a few days now and keep landing on the idea that the NPM modules for Firebase (and/or Firestore) are not the same as the modules Google specifies in their Web examples. (https://firebase.google.com/docs/firestore/quickstart?authuser=0) They direct you to include script tags that point to a set of bundles. And some have found that the objects coming from both NPM and these bundles are different.

See: firebase/firebase-js-sdk#464 (electron and vue, but really the same problem and workaround)

Also I would like to suggest that since firestore works flawlessly for development using webpack dev server, is there some tweaking we can do to how Gatsby 1.9 uses the current version of webpack for prod builds? I am not familiar with how Gatsby uses webpack (only how you can override with modifyWebpackConfig). But if I could be pointed in the right direction, i'd be happy to investigate the differences between dev and prod builds to see why one works and one does not.

I still have yet to try adding the scripts via tags for https://www.gstatic.com/firebasejs/4.9.0/firebase.js and https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js but only if there is a way it can co-exist in my development environment that really requires es6 modules.

Let me know if anyone has any thoughts on this information.

Thanks.

[m-allanson]

@willcode4food have you seen the docs page on modifying the webpack config? It describes the different build stages and links to the source of Gatsby's webpack config.

Note that Gatsby v2 will be upgrading from webpack version one to version three or four, so the specifics of the webpack setup may change significantly.

[willcode4food]

Think this has to do something with grpc/grpc#11435
and mapbox/node-pre-gyp#308

[willcode4food]

Found this as well firebase/firebase-js-sdk#221

[willcode4food]

Hey FYI, upgrading to Gatsby v2.0.0-alpha.8 solved these issues. I am pleased to say that you will be able to use Google Firestore upon the release of 2.0.0

[deegha]

Hey FYI, upgrading to Gatsby v2.0.0-alpha.8 solved these issues. I am pleased to say that you will be able to use Google Firestore upon the release of 2.0.0

I still get this error, i use firebase "firebase": "^5.9.2" and "next": "^8.0.4", any idea if am doing anything wrong ?

[ric9176]

If you are still using gatsby v1 for whatever reason, delete your node_modules and in your package.json replace whatever firebase version you have with "firebase": "4.x" and run npm install or yarn

[JoshRozin]

Hey @deegha I have been struggling with this issue for the last few days. Have you found a solution for Next.js?

[deegha]

Hey @deegha I have been struggling with this issue for the last few days. Have you found a solution for Next.js?

No couldn't get it done, so i wrote a google cloud function to query the firebase database and called an https request from the client side (next,js app) using node-fetch to the cloud functions.

so technically i wrote an api using google cloud functions. that was my solution.

[deegha]

If you are still using gatsby v1 for whatever reason, delete your node_modules and in your package.json replace whatever firebase version you have with "firebase": "4.x"

Thank you! but this didn't work but i used "firebase": "^5.9.2". should i use "firebase 4.x" or using firebase 5 would do ?

[ric9176]

@deegha I had to use 4.x to get firebase working with gatsby v1

[JoshRozin]

@deegha I FOUND A WORK AROUND. Holy hell, that was about 2 weeks of errors. Okay, I'm a little bit excited so I'll try to explain the best I can. The issue comes from a problem with gRPC (a dependency of firebase/firestore), which has trouble finding bindings from node-pre-gyp (it's dependency) on Windows. So instead of importing Firebase like this: import firebase from 'firebase/app'; , you need to import firebase by creating an App Shell use script tags like this:

<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-app.js" />
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-firestore.js" />

With this work around, you can cache these scripts to your user's browser. However, this will result in increased loading times ONLY for the first time your user enters your website. Other than that, the website should actually run just as fast (maybe even faster). You don't even need to bother creating an external API (unless that's what you'd like to do). To access your database, you can do a simple firebase.firestore()...get() but make sure your user has Firebase installed in their cache before you try something like this or you will get an error stating that firebase.firestore() is not a function.

Let me know if you have any questions :)

[deegha]

@deegha I FOUND A WORK AROUND. Holy hell, that was about 2 weeks of errors. Okay, I'm a little bit excited so I'll try to explain the best I can. The issue comes from a problem with gRPC (a dependency of firebase/firestore), which has trouble finding bindings from node-pre-gyp (it's dependency) on Windows. So instead of importing Firebase like this: import firebase from 'firebase/app'; , you need to import firebase by creating an App Shell use script tags like this:

<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-app.js" />
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase-firestore.js" />

With this work around, you can cache these scripts to your user's browser. However, this will result in increased loading times ONLY for the first time your user enters your website. Other than that, the website should actually run just as fast (maybe even faster). You don't even need to bother creating an external API (unless that's what you'd like to do). To access your database, you can do a simple firebase.firestore()...get() but make sure your user has Firebase installed in their cache before you try something like this or you will get an error stating that firebase.firestore() is not a function.

Let me know if you have any questions :)

Thank you very much for the update. anyway i have created that API so i decided to go with that.

[Temkit]

on Next.js this link fixed it for me :

https://lifesaver.codes/answer/fail-to-deploy-with-firebase-as-a-dependency

even my next version is 9.3.4