alexluong/gatsby-packages

Gatsby packages

gatsby-packages's Issues

Error in function eval in ./node_modules/gatsby-plugin-firebase/src/firebase.js:3

Hai, I have an error like this
Cannot read properties of undefined (reading 'apps')

How to fix that? Thanks 🙏

No dependencies in package.json, so gatsby-plugin-firebase doesn't complain if firebase is outdated

gatsby develop generates the following error:

`ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve 'firebase/analytics' in 'C:\Users\agrippa\Documents\GitHub\gallery-client\node_modules\gatsby-plugin-firebase\src'

Relevant gatsby-config snippet:

{
      resolve: "gatsby-plugin-firebase",
      options: {
        features: {
          auth: true,
          database: false,
          firestore: false,
          storage: false,
          messaging: false,
          functions: false,
          performance: false,
          analytics: false,
        },
      },
    },

I shouldn't need to install firebase/analytics to use this plugin. What's going on?

How to implement Firebase Analytics

credentials not given to <Layout> Component

Hi,

the credentials from pluginOptions in wrapRootElement are not attached to the <Layout> component as props.

So if you set the apiKey in the plugin options instead of an environment variable, the key will be undefined and the initialization will fail.

See: https://github.com/alexluong/gatsby-packages/blob/master/packages/gatsby-plugin-firebase/gatsby-browser.js#L5

WebpackError: TypeError: gatsby_plugin_firebase__WEBPACK_IMPORTED_MODULE_0__.d efault.firestore is not a function

I'm trying to use firestore and have imported it in both brower.js and ssr.js, it works in develop, but i got this issue when build:

failed Building static HTML for pages - 13.183s

 ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  1 | import firebase from "gatsby-plugin-firebase"

> 20 | const db = firebase.firestore()
     |                     ^
  21 |
  22 | const getGeohashRange = (
  23 |   latitude,


  WebpackError: TypeError: gatsby_plugin_firebase__WEBPACK_IMPORTED_MODULE_0__.d  efault.firestore is not a function

As mentioned in another issue that no need to import the pacakge in ssr.js, i tried but still not working, anyone can help? thanks

Gatsby Firebase Plugin on Production

Hello Alex,

Thank you for this plugin, I have learned alot from it and the process of integrating firebase authentication.

I am running into a roadblock with the plugin, I am able to deploy locally and it works.

But when I deploy authentication to my live site on production, the app breaks and does not load...
I believe it has something to do with the firebase plugin, has it been tested for production?

Best,
T

use query params help

Hi there,

Got the plugin all installed and working in the sense that it updates the setQuery hook and the URL updates, but the 'query' variable doesn't update also - it stays at whatever the option was on the page load.

Any ideas why this is?

Analytics and Performance Don't Work with gatsby-plugin-firebase

According to Firebase docs, in order to enable Google Analytics inside a Firebase-enabled app, all you need is to import firebase/app.

Performance is also enabled by importing firebase/performance, followed by const perf = firebase.performance().

However, when using gatsby-plugin-firebase, I just can't make Analytics and Performance work. I mean, when I create the production build and open the page in the Chrome browser, the Tag Assistant extension doesn't show any tags at all.

I can, however, create tag events by running firebase.analytics().LogEvent("my_event").
In this case, the Tag Assistant does show one tag, but still says that Google Analytics is not enabled.

Here's how I created firebase and perf variables:

import { React, useState } from 'react'
import { useFirebase } from "gatsby-plugin-firebase"

function FirebaseFunctions() {
  const [firebase, setFirebase] = useState(null);
  const [perf, setPerf] = useState(null);

  useFirebase(firebase => {
    setFirebase(firebase);
    setPerf(firebase.performance());
    firebase.analytics().logEvent('app_rendered');
  }, [])

  return [firebase, perf]
}

export default FirebaseFunctions

After that, I call this hook in my Layout function like this:
const [ firebase, perf ] = FirebaseFunctions();

Am I doing something wrong, or is it that this plugin doesn't enable Analytics?

Error compiling html.js when using wrapRootElement in gatsby-ssr.js with select firebase imports

As mentioned in this comment on another issue, there is an error compiling html.js after running either gatsby develop or gatsby build when wrapRootElement is used in conjunction with select firebase package imports in gatsby-ssr.js. Specifically, at least messaging, analytics, and performance all cause this error when imported, whereas firestore and functions (for example) do not cause the error.

Screenshot from the linked comment:

Github repo demonstrating the problem

Edit:
The problem just seems to be from importing those packages in gatsby-ssr.js, independent of this plugin per se. That is, there is something between firebase and gatsby that won't allow those packages to be imported in gatsby-ssr.js when using wrapRootElement. gatsby-browser.js seems to have no real problem with those imports, and indeed they work fine in development as long as the imports are left out of gatsby-ssr.js.

Why is gatsby-plugin-firebase still in beta? What are the missing features to make it stable? (Roadmap?)

I was wondering, why is gatsby-plugin-firebase still in beta? What are the missing features to make it stable? What's the current vision in that regard?

API Key exposed?

I'm not sure this is a good idea to drop in the entire Firebase credentials directly in the options.

I would prefer if you could expose the initializeApp function so we can configure that and return the app instance on our own.

All I really want is to have a wrapper around the Gatsby pages and some useful Firebase components to fetch and render data.

useFirebase hook generating errors

When using useFirebase(firebase => { ... }) I keep getting errors.

TypeError: Object(...) is not a function

> 20 |  useFirebase(firebase => {
  21 |    setStorageRef(firebase.storage.ref("uploads"))
  22 |  }, [])

---

If I try to use the useContext method, I then get this error...

TypeError: Cannot read property '_context' of undefined

// useContext
// E:/Git Repos/oathall-leavers-site/node_modules/react/cjs/react.development.js:1603
  1600 | {
  1601 |   !(unstable_observedBits === undefined) ? warning$1(false, 'useContext() second argument is reserved for future ' + 'use in React. Passing it is not supported. ' + 'You passed: %s.%s', unstable_observedBits, typeof unstable_observedBits === 'number' && Array.isArray(arguments[2]) ? '\n\nDid you call array.map(useContext)? ' + 'Calling Hooks inside a loop is not supported. ' + 'Learn more at https://fb.me/rules-of-hooks' : '') : void 0; // TODO: add a more generic warning for invalid values.
  1602 | 
> 1603 |   if (Context._context !== undefined) {
  1604 |     var realContext = Context._context; // Don't deduplicate because this legitimately causes bugs
  1605 |     // and nobody should be using this in existing code.
  1606 | 

gatsby-plugin-firebase v0.1.8 throws an error while running with firebase v8.0.1

This error is thrown while using "gatsby-plugin-firebase": "0.1.8" with "firebase": "8.0.1",.

TypeError
e.initializeApp is not a function

Downgrading firebase to "firebase": "7.24.0" made the error disappear.

This is the code in

        functions,
        performance,
        analytics,
      ]).then(values => {
        const firebaseInstance = values[0]
        firebaseInstance.initializeApp({
          apiKey: credentials.apiKey || process.env.GATSBY_FIREBASE_API_KEY,
          authDomain: credentials.authDomain || process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
          databaseURL: credentials.databaseURL || process.env.GATSBY_FIREBASE_DATABASE_URL,
          projectId: credentials.projectId || process.env.GATSBY_FIREBASE_PROJECT_ID,
          storageBucket: credentials.storageBucket || process.env.GATSBY_FIREBASE_STORAGE_BUCKET,

Gatsby Redux Firebase

I've followed this guide on adding Redux to Gatsby - it works just fine. I did every step from this official guide on adding Firebase to Gatsby.

I get the error below. How can I add firebase to my Gatsby Redux?

'firebase_app__WEBPACK_IMPORTED_MODULE_0__["default"].apps')

Both gatsby-browser and gatsby-ssr

import "firebase/auth";
import "firebase/firestore";

export { default as wrapRootElement } from './src/ReduxWrapper';

I've followed this guide on adding Redux to Gatsby - it works just fine. I did every step from this official guide on adding Firebase to Gatsby.

I get error below. How can I add firebase to my Gatsby Redux?

'firebase_app__WEBPACK_IMPORTED_MODULE_0__["default"].apps')

Both gatsby-browser and gatsby-ssr

import "firebase/auth";
import "firebase/firestore";

export { default as wrapRootElement } from './src/ReduxWrapper';

userAction.js

//imports ...
import firebase from "gatsby-plugin-firebase";

const test = (t) => {
   console.log(t);
}

export const updateUid = uid => {
  test("hey");

  return (dispatch, getState) => {
    dispatch({
      type: TYPES.UPDATE_UID,
      payload: uid
  })
  }
}

Error when setting up

I have followed the documentation but I get the below error when I run gatsby develop after setting up my envs and gatsby-config

  Error: ./node_modules/gatsby-plugin-firebase/gatsby-ssr.js 5:2
  Module parse failed: Unexpected token (5:2)
  You may need an appropriate loader to handle this file type.
  | 
  | export const wrapRootElement = ({ element, props }, pluginOptions) => (
  >   <Layout {...props} features={pluginOptions.features}>
  |     {element}
  |   </Layout>
   @ ./.cache/api-runner-ssr.js 46:10-114
   @ ./.cache/develop-static-entry.js

My gatsby info has the below;

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.3.0 - ~/.nvm/versions/node/v10.3.0/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.3.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 77.0.3865.90
    Safari: 13.0.2
  npmPackages:
    gatsby: ^2.4.3 => 2.4.3 
    gatsby-cli: ^2.7.28 => 2.7.28 
    gatsby-image: ^2.0.41 => 2.0.41 
    gatsby-plugin-firebase: ^0.1.1 => 0.1.1 
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.4 
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1 
    gatsby-plugin-offline: ^2.1.0 => 2.1.0 
    gatsby-plugin-prefetch-google-fonts: ^1.4.2 => 1.4.2 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5 
    gatsby-plugin-sass: ^2.0.11 => 2.0.11 
    gatsby-plugin-sharp: ^2.0.37 => 2.0.37 
    gatsby-plugin-styled-components: ^3.1.1 => 3.1.2 
    gatsby-source-filesystem: ^2.0.33 => 2.0.33 
    gatsby-source-graphql: ^2.0.18 => 2.0.19 
    gatsby-transformer-sharp: ^2.1.19 => 2.1.19 

Old version if install with npm

Hey Alex,
when I run npm install gatsby-plugin-firebase (as mentioned in the dos), I get some old version that doesn't work at all.
I copyed the files from this repo manualy and this seems to work!
Maybe I'm to stupid and did something wrong but I acualy just followed the docs ...

All the best K

building project returns webpack error

project runs locally as expected but building it gives me the following errors:

using
useFirebase(firebase => {
firebase.auth().onAuthStateChanged(async user => {
await setUser(user)
})
}, [])
returns:
WebpackError: TypeError: Object(...) is not a function

using
const firebase = React.useContext(FirebaseContext) returns

returns:
WebpackError: TypeError: Cannot read property '_threadCount' of undefined

gatsby-plugin-use-query-params jumps to top of the page when a query param is set

Excellent work wrapping this hook up for use in Gatsby, but is there a reason there is a jump to the top of the document when a query parameter is set? This is also reported by various other people in pbeshai/use-query-params#56

Is there a way for this to be solved in the plugin?

How do I lazy load firebase?

I'm only using gatsby-plugin-firebase for select pages but it seems that the firebase bundle is also being added to the pages that don't use it. How would I go about fixing this?

gatsby-plugin-use-query-params broke with use-query-params 2.0.0

A very simple use of this plugin with use-query-params now fails during the Gatsby build with:

/home/eagle/lsst/gafaelfawr/ui/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

TypeError: Cannot read properties of undefined (reading 'search')
    at useQueryParams_useQueryParams (/home/eagle/lsst/gafaelfawr/ui/.cache/page-ssr/routes/webpack:/gafaelfawr/node_modules/use-query-params/dist/useQueryParams.js:32:1)

This appears to be due to the changes to the adapter setup in the new use-query-params.

Breaking change in Firebase ^9.0.2 (Solution)

In the latest version of firebase (^9.0.2), there's no default export in "firebase/app".

You can get this working by modifying the import in gatsby-plugin-firebase/src/firebase.js as follows:

import firebase from "firebase/app"; → import firebase from "firebase/compat/app";

Documentation on gatsby.org

Hi Alex,
thanks for making such a helpful plugin. I think there is a mistake in fragment about dotenv library and how to use it:
https://www.gatsbyjs.org/packages/gatsby-plugin-firebase/#usefirebase

require("dotenv").require()
module.exports = {
...
}

I found that here in yours documentation it's written like that:

require("dotenv").config()

module.exports = {
...
}

And it works!

Best regards!
Rafał

Firebase Service Account Keys

Is there a way to convert the status credentials to initialize Firebase using the Service Account json keys/file?

Custom Firebase Functions region

The region for firebase functions must be declared at initialisation, but this package doesn't provide any way to give a region.

This is really important to reduce latency as much as possible.

https://firebase.google.com/docs/functions/locations#client-side_location_selection_for_callable_functions

`gatsby-plugin-use-query-params` not working with Gatsby V4

After following the migration guide and updating from Gatsby V3 to V4, I'm having problems with useQueryParams() in my project. I suspect it has something to do with how all of my other gatsby-plugin-* packages needed to be updated for V4, but an update wasn't available for gatsby-plugin-use-query-params.

Do you think this is the cause of the problem?

If you would like, I'll try to make a new repository to reproduce the issue.

Documentation when using Messaging

I am trying to setup which uses the messaging option and I am struggling a bit to figure things out. Do you mind adding a guide on how to setup messaging? I'd be happy to do a PR for this if I get an idea of how to set it up.

Thanks

Transpile code before publishing to NPM

I'm having issues using jest and this package.
Jest won't transform the code because it is a JS file and then it errors because of non-compliant syntax

[...]
Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    [...]/node_modules/gatsby-plugin-firebase/src/components/FirebaseContext.jsx:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react"
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

If anyone else has this problem:
I was able to make it work by telling jest to transform this library by setting "transformIgnorePatterns" to:

[
    "node_modules/(?!(gatsby|gatsby-plugin-firebase)/)",
],

Cannot read property 'apiKey' of undefined

Hello, I was just trying to setup this plugin for my project, but, can't get past the gatsby-config.js phase.

I've added the plugin in my gatsby-config.js like this:

module.exports =
  {
    plugins: [
      {
        resolve: `gatsby-plugin-firebase`,
        options:
          {
            credentials:
              {
                apiKey: `value`,
                authDomain: `value`,
                databaseURL: `value`,
                projectId: `value`,
                storageBucket: `value`,
                messagingSenderId: `value`,
                appId: `value`
              }
          }
      },
  }

with the respective values from the config Firebase gave my app. However, when I run gatsby develop in console, I get:

"gatsby-plugin-firebase" threw an error while running the onCreateWebpackConfig lifecycle:

Cannot read property 'apiKey' of undefined

  2 |   const {
  3 |     credentials: {
> 4 |       apiKey,
    |       ^
  5 |       authDomain,
  6 |       databaseURL,
  7 |       projectId,

File: node_modules\gatsby-plugin-firebase\gatsby-node.js:4:7

This seemed to me like the easiest step, but, has kept me puzzled already. I'm using "gatsby-plugin-firebase": "^0.2.0-beta.4", by the way.

This is a browser-targeted Firebase bundle... error on gatsby build

[                            ]   0.001 s 0/5 0% Building static HTML for pages
[2020-06-19T01:28:49.445Z]  @firebase/app:
      Warning: This is a browser-targeted Firebase bundle but it appears it is being
      run in a Node environment.  If running in a Node environment, make sure you
      are using the bundle specified by the "main" field in package.json.
      If you are using Webpack, you can specify "main" as the first item in
      "resolve.mainFields":
      https://webpack.js.org/configuration/resolve/#resolvemainfields

      If using Rollup, use the rollup-plugin-node-resolve plugin and specify "main"
      as the first item in "mainFields", e.g. ['main', 'module'].
      https://github.com/rollup/rollup-plugin-node-resolve

All I want to use is firebase/auth. I have this imported in gatsby-browser.js and gatsby-ssr.js as per the docs. Is there something here that I need to do to get it to work? Let me know what other details would be helpful!

measurementId not set on firebase.initializeApp()

@alexluong Thank you for your efforts on this awesome plugin , loving the updates in 0.2.0-beta.3 👏

More of a heads up than an issue - whilst migrating I noticed the measurementId is not set as it's not provided on firebase.initializeApp() - which makes firebase/analytics really cranky, like, big red text cranky 😱

[RFC] gatsby-plugin-firebase v0.2.0

Recently, I've learned that with Gatsby, you can import firebase directly and use it without any issue on the server side. There will be an ugly warning, but everything should work just fine.

Therefore, inspired by gatsby-theme-firebase, I'd like to make some changes to this package.

Mission

This package gatsby-plugin-firebase aims to help initializing a Firebase app for you without forcing you to change how you've been using Firebase before. You should be able to use other packages on top of firebase like react-firebase-hooks without any issues.

Set up

npm install firebase gatsby-plugin-firebase # version 0.2.0

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-firebase",
      options: {
        credentials: {
          apiKey: process.env.FIREBASE_API_KEY,
          authDomain: process.env.FIREBASE_AUTH_DOMAIN,
          databaseURL: process.env.FIREBASE_DATABASE_URL,
          projectId: process.env.FIREBASE_PROJECT_ID,
          storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
          messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
          appId: process.env.FIREBASE_APP_ID,
        },
      }
    }
  ]
}

Now, instead of the features option, you can import whichever inside gatsby-browser.js:

// gatsby-browser.js

import "firebase/auth"
import "firebase/firestore"
import "firebase/storage"

Usage

To use firebase, you can import it from gatsby-plugin-firebase

import React from "react"
import firebase from "gatsby-plugin-firebase"

export default () => {
  const [data, setData] = React.useState(null)
  React.useEffect(() => {
    firebase.firestore().doc("data/sample").get().then(snapshot => {
      setData(snapshot.data())
    })
  })

  return <MyComponent data={data} />
}

I'm also working on an optional useAuth hook that listens to onAuthStateChange:

import { useAuth } from "gatsby-plugin-firebase"

const { isInitializing, isLoggedIn, user } = useAuth()

[gatsby-plugin-firebase] Error with SSR using netlify

I'm using gatsby-plugin-firebase in conjunction with react-firebase-hooks, and everything works on my local dev server. However, I'm also using netlify, and all of my builds are failing after upgrading to v0.2.

I'm getting this error:

WebpackError: TypeError: gatsby_plugin_firebase__WEBPACK_IMPORTED_MODULE_4__.d efault.auth is not a function

12:16:45 AM: success Rewriting compilation hashes - 0.001s
12:16:46 AM: success run queries - 53.022s - 8/8 0.15/s
12:16:52 AM: [2020-03-15T07:16:52.335Z]  @firebase/app:
12:16:52 AM:       Warning: This is a browser-targeted Firebase bundle but it appears it is being
12:16:52 AM:       run in a Node environment.  If running in a Node environment, make sure you
12:16:52 AM:       are using the bundle specified by the "main" field in package.json.
12:16:52 AM:       If you are using Webpack, you can specify "main" as the first item in
12:16:52 AM:       "resolve.mainFields":
12:16:52 AM:       https://webpack.js.org/configuration/resolve/#resolvemainfields
12:16:52 AM:       If using Rollup, use the rollup-plugin-node-resolve plugin and specify "main"
12:16:52 AM:       as the first item in "mainFields", e.g. ['main', 'module'].
12:16:52 AM:       https://github.com/rollup/rollup-plugin-node-resolve
12:16:52 AM: failed Building static HTML for pages - 4.381s
12:16:52 AM: error Building static HTML failed for path "/404/"
12:16:52 AM:   43 |
12:16:52 AM:   44 | const AuthDropdown = (): ReactElement => {
12:16:52 AM: > 45 |   const [user, loading, error] = useAuthState(firebase.auth())
12:16:52 AM:      |                                                        ^
12:16:52 AM:   46 |
12:16:52 AM:   47 |   if (loading) {
12:16:52 AM:   48 |     return (
12:16:52 AM: 
12:16:52 AM:   WebpackError: TypeError: gatsby_plugin_firebase__WEBPACK_IMPORTED_MODULE_4__.d  efault.auth is not a function
12:16:52 AM:   
12:16:52 AM:   - Navbar.tsx:45 AuthDropdown
12:16:52 AM:     src/components/layout/Navbar.tsx:45:56
12:16:52 AM:   
12:16:52 AM: 
12:16:52 AM: not finished Generating image thumbnails - 7.111s
12:16:52 AM: Skipping functions preparation step: no functions directory set

Set Query Param results in a 404 Page Not Found.

I am using the query param to try and filter out some results and this module works when querying the params but not when trying to update them

const [categoryParam, setCategoryParam] = useQueryParam(
    'category',
    StringParam
  )

<button
                type="button"
                onClick={() => {
                  setCategoryParam(category)
                }}
>My Button</button>
              

When I try this, and click the button, I get immediately redirected to the 404 page saying the page doesn't exist. What's stranger is if I type something into the gatsby develop's 404 Page search box, as soon as I type a letter it loads the page correctly.

Why is this module causing a 404 when setting a query param?