Fail to deploy with firebase as a dependency #6073
Comments
|
I'm getting an identical error. I actually found this repo trying to fix it. Unfortunately, his solution is to import from the firebase submodules rather than directly from firebase, but I already do that (note, I'm using Typescript): import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'
const prodConfig = {
apiKey: 'x',
authDomain: 'x',
databaseURL: 'x',
projectId: 'x',
storageBucket: 'x',
messagingSenderId: 'x',
}
const config = prodConfig
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
const firestore = firebase.firestore()
const settings = { timestampsInSnapshots: true }
firestore.settings(settings)
const auth = firebase.auth
const storage = firebase.storage()
export {
firestore,
auth,
storage,
}And then it logs this every time you try to load the site: |
|
@noahtallen You might want to try the |
|
Thanks for the tip! I've just tried both of those things, and I now get this error. Progress.... I think? |
|
I've created an issue to track implementing a solution for this on ncc: vercel/ncc#240 |
|
@noahtallen If you need to get something up and running, I was able to get it to compile to static HTML just fine: Then I deployed it to Firebase's CDN and it's functional. It won't give you server-side rendering, but it isn't broken 😆 |
|
For some reason, I'm now getting 404s for every single page when I build locally (on latest canary), but no errors thrown in the console. Additionally, when I export using those commands, it doesn't appear to build any page other than app & error. Not that this is the same issue, of course :P |
First-Class SupportFirebase is now supported in Next.js Previous SolutionHello! Thank you everyone for your patience. The root of the problem is that With that said, we've managed to come up with a work-around. This solution is only applicable to users deploying on Now v2. You can follow these steps to get up and running:
|
|
What would be a another recommended 'hosted' store option similar to Firebase? |
|
I had a similar issue, ie Firestore not working in Zeit, but the Firebase Realtime Database does work! |
|
@Timer Hey there, thanks for the tips. I tried to follow your steps, but ran into another error Would you mind taking a look? Or do you have any other suggestions on how to deploy a Next+Firebase/Firestore app (either with Now, Firebase hosting, etc.)? I'm running Local development logs:(Attempted) Now production deployment logs:next.config.js:const webpack = require('webpack');
require('dotenv').config();
const withTypescript = require('@zeit/next-typescript');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const withAssetRelocator = (nextConfig = {}) => {
return Object.assign({}, nextConfig, {
webpack(config, options) {
const { isServer } = options;
if (isServer) {
config.node = Object.assign({}, config.node, {
__dirname: false,
__filename: false,
});
config.module.rules.unshift({
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '@zeit/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'assets',
existingAssetNames: [],
wrapperCompatibility: true,
escapeNonAnalyzableRequires: true,
},
},
});
}
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
return config;
},
});
};
module.exports = withAssetRelocator(
withTypescript({
target: 'serverless',
webpack(config) {
if (process.env.ANALYZE) {
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerPort: 8888,
openAnalyzer: true,
})
);
}
// to enable reading variables from .env file
const env = Object.keys(process.env).reduce((acc, curr) => {
acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
return acc;
}, {});
config.plugins.push(new webpack.DefinePlugin(env));
return config;
},
cssModules: true,
})
);babel.config.js:module.exports = (api) => {
api.cache(true)
return {
presets: [
'next/babel',
'@zeit/next-typescript/babel',
'@emotion/babel-preset-css-prop'
],
plugins: [
'emotion',
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
['transform-define', {
'process.env.NODE_ENV': process.env.NODE_ENV
}]
]
}
}now.json:{
"version": 2,
"name": "nextProject",
"builds": [{ "src": "next.config.js", "use": "@now/next@canary" }],
"routes": [
{ "src": "/edit/(?<postId>[^/]+)$", "dest": "/edit?postId=$postId" },
{
"src": "/_next/static/(?:[^/]+/pages|chunks|runtime)/.+",
"headers": { "cache-control": "immutable" }
}
]
} |
|
Update for anyone else who runs into the same It appears that dotenv was the issue (with my setup). I had defined the Firebase config keys in a .env file, hoping to use dotenv to pass it to As a temporary solution, I put my Firebase config keys directly into the config object as strings (instead of trying to read from process.env.FIREBASE_API_KEY, etc). If anyone has run into this and has a solution, do tell! Nevertheless, with the instructions above from Timer, my app now deploys on Now 2! Thanks! |
|
@brandontle Your issue might be related to this: vercel/webpack-asset-relocator-loader#3 Try using a different version number—perhaps 1.x for the webpack asset relocator. |
|
@brandontle thanks for the update here. Could you share the code example of how you were loading the |
|
@brandontle Strangely enough, I can print Edit 3: This seems to work, for real this time. Add the following to your |
|
Still an issue for me. Been fighting this for a week now... From what I've seen, it seems to be an issue with webpack or gRPC. Everytime I remove gRPC dependent modules, it is a okay. |
|
for me, both using next@canary and withAssetRelocator worked. #6073 (comment) next.config.js const withAssetRelocator = (nextConfig = {}) => {
return Object.assign({}, nextConfig, {
webpack(config, options) {
const { isServer } = options
if (isServer) {
config.node = Object.assign({}, config.node, {
__dirname: false,
__filename: false,
})
config.module.rules.unshift({
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '@zeit/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'assets',
existingAssetNames: [],
wrapperCompatibility: true,
escapeNonAnalyzableRequires: true,
},
},
})
}
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options)
}
return config
},
})
}
module.exports = withAssetRelocator(withCSS(withTypescript(withSass({
target: "serverless"
}))));now.json {
"version": 2,
"name": "nextjs",
"builds": [
{ "src": "package.json",
"use": "@now/next@canary",
"config": {
"maxLambdaSize": "10mb"
}
}
]
} |
Nice, wow, this is the answer. Works perfectly, thanks @rederekt. Oddly enough, using this method, I still need to load and read a .env file in my next.config.js file. The .env file can be empty, but if I remove it, the environment variables specified in now.json never make it to process.env (so Firebase fails to initialize). Maybe a residual from all of my previous attempts to fix dotenv. |
|
I've followed everything above and it's worked great although when I visit my Next.js app in Now I'm getting a 502 Error. In my logs, I'm getting the below error... I've done all of the steps above including removing dotenv and supplying my firebase keys directly to the initialisation to no avail. Does anyone have a link to a working example? |
|
@fakesamgregory looks like they changed some of the packaging in Firebase 6.0.0 which will require a different workaround. I saw the same error as you after upgrading. The above fix worked for me up-to Firebase 5.11.1 so if you downgrade you should be good until a new method is found. |
|
@Geeman201 This worked. Thank you! Firebase is at Something not mentioned above that set me back was that env variables ( Thank you for everyones hard work. It's helped me a lot. |
|
If there are Firebase 6.0.0 issues in ncc, what would the replication be to check this? I've just tested upgrading our integration test to version 6 and it all seems to be working ok for me. If you can share a minimal replication that would help a lot. I've also created an issue specifically to track Firebase 6 support in vercel/ncc#392. |
This comment has been minimized.
This comment has been minimized.
@bfulop How? I can't use Realtime Database either |
This comment has been minimized.
This comment has been minimized.
|
@nickbender Did you even use the |
|
@bradgarropy Nope, but that may be required for next 8/ and firebase 6. |
|
@nickbender Hey, thanks man! I had to degrade firebase to 5.7.1, react-with-firebase-auth to 1.0.0 and install grpc, request. |
|
I'm deploying to firebase cloud functions with:
Following these steps did help the problem (I can at least build the app successfully now), but if I deploy my app to my firebase function I get this error. I tried running I tried older versions of firebase (5.7.1) (5.11.1) and no luck either. If I disable my firebase imports in my project and deploy. It deploys just fine, so it's definitely an issue with importing firebase into my project. I'm out of ideas. If anyone can help I would be very grateful 🤗 |
|
@embpdaniel Something that helped me out a lot was switching to |
|
Thanks for the tip @bradgarropy . I just tried it, but I get the same error :/ |
|
🚨Fix incoming. Thanks to @Timer for being receptive to my complaining on Twitter and digging into the issue! UPDATEThe fix has been included in the This fixes any issues for me with running Firebase client side or server side. |
|
To summarize, the fix to Looking forward to a future release of Next.js that integrates the |
That works, but after I used it my bundle sizes increased from ├── λ product/ProductAvatarUser (364.83KB) [sfo1] to ├── λ _error (10.29MB) [sfo1] Is that normal? |
|
Yes @skaptox -- Firebase requires huge server side dependencies. |
|
@skaptox I have a separate NextJS application that utilizes Firebase I don't utilize the firebase library on the server (I block any initialization attempts), but at least it can exist on the app without throwing errors. In other words the import statements in the app don't make the build flip out. You mentioned the root of the problem is Firebase not being designed to be a universal application. I'm curious why it works in this case, and not when I deploy to Firebase. Is it because I set the target to |
This comment has been minimized.
This comment has been minimized.
|
I'm locking this issue because it is solved by #6073 (comment). Please follow these instructions until Next.js 9.2 (we estimate) for a proper fix. The above solution works with Next.js 8 and 9. Be very careful to use this exact version: |
Comment from Maintainers
Firebase is now supported out of the box in Next.js 9.0.4 and newer!
Bug report
Describe the bug
This has been a journey, but I think I've pinned down the bug to something related to Firebase. I have a fairly simple app that I have attempted to deploy using
nowwith the following configuration:{ "version": 2, "builds": [ { "src": "package.json", "use": "@now/next" } ] }While looking up the error, I found these two sources that suggest it might be a firebase issue: source 1 source 2
When I remove
firebaseas a dependency, everything deploys fine. Having said that, this app is entirely client-side for Firebase (not usingfirebase-admin) and the issues on spectrum seem to suggest that the issue is related to server configuration for Firebase... so the issue is not exactly the same.I also came across this issue, which is also similar, but the person who posted it is attempting to deploy to firebase hosting, which I am not—I'm deploying with
now.To Reproduce
I created a minimal reproducible bug here:
https://github.com/samcorcos/next-firebase-bug
Follow the steps in the
READMEto reproduce.Expected behavior
I would expect the deploy to work with the firebase dependency.
System information
Additional context
Here are the logs from the one of the failing deploys:
I'm open to workarounds and inelegant solutions if you have any ideas. Thank you for your time 😄
The text was updated successfully, but these errors were encountered: