alexluong / gatsby-packages Goto Github PK
View Code? Open in Web Editor NEWGatsby packages
License: MIT License
Gatsby packages
License: MIT License
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?
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.
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
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
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?
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?
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
.
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?
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.
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 |
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,
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
})
}
}
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
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
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
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?
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?
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.
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";
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Ε
Is there a way to convert the status credentials to initialize Firebase using the Service Account json keys/file?
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.
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.
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
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)/)",
],
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.
[ ] 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!
@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 π±
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.
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.
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"
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()
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.