I have a nextjs project, v12.1.3 with react v18.1.0. I use firebase realtime database to handle notifications into my project. It works in develop mode, but it doesn't in production (on built environment).
The errors I get are the following:
ReferenceError: emptyChildrenSingleton is not defined
at new bV (a198fdd9-b0625f5d1b77c03a.js:1:75705)
at new cF (a198fdd9-b0625f5d1b77c03a.js:1:95593)
at a198fdd9-b0625f5d1b77c03a.js:1:124619
at get _repo [as _repo] (a198fdd9-b0625f5d1b77c03a.js:1:124994)
at get _root [as _root] (a198fdd9-b0625f5d1b77c03a.js:1:125199)
at d_ (a198fdd9-b0625f5d1b77c03a.js:1:120499)
at n (index-493c2cb0fc06fe87.js:1:879)
at index-493c2cb0fc06fe87.js:1:826
at g0 (framework-47484f2290a3befd.js:1:91915)
at h9 (framework-47484f2290a3befd.js:1:113308)
[2022-06-13T21:12:40.922Z] #firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read properties of undefined (reading 'syncPointTree_')
at cM (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:99754)
at cI (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:97044)
at dC (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:109983)
at http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:124197
at ap (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:3775)
at d.onServerInfoUpdate_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:124182)
at d.handleTimestamp_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:43294)
at d.onReady_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:39829)
at aM.onConnectionEstablished_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:26211)
at aM.onHandshake_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:25266)
Uncaught TypeError: Cannot read properties of undefined (reading 'syncPointTree_')
at cM (a198fdd9-b0625f5d1b77c03a.js:1:99754)
at cI (a198fdd9-b0625f5d1b77c03a.js:1:97044)
at dC (a198fdd9-b0625f5d1b77c03a.js:1:109983)
at a198fdd9-b0625f5d1b77c03a.js:1:124197
at ap (a198fdd9-b0625f5d1b77c03a.js:1:3775)
at d.onServerInfoUpdate_ (a198fdd9-b0625f5d1b77c03a.js:1:124182)
at d.handleTimestamp_ (a198fdd9-b0625f5d1b77c03a.js:1:43294)
at d.onReady_ (a198fdd9-b0625f5d1b77c03a.js:1:39829)
at aM.onConnectionEstablished_ (a198fdd9-b0625f5d1b77c03a.js:1:26211)
at aM.onHandshake_ (a198fdd9-b0625f5d1b77c03a.js:1:25266)
The integration is very basic: I write my notification client side and create them server side with firebase-admin. So the problem is reading from realtime database (in prod only).
The code is something like this (i simplified it)
const [textData, setTextData] = useState<any[]>([]);
useEffect(() => {
initFirebase();
fetchData();
}, []);
const fetchData = () => {
const db = getDatabase();
const starCountRef = ref(db, 'testData');
onValue(starCountRef, (snapshot) => {
const data = snapshot.val();
setTextData(
Object.entries(data || {}).map(
([key, value]: [key: string, value: any]) => ({
key,
text: value?.text,
})
)
);
});
};
Where initFirebase() is a classic:
import { getApps, initializeApp } from 'firebase/app';
const firebaseConfig = {
//my configs
};
// Initialize Firebase
const initFirebase = () => {
if (getApps().length && getApps.length > 0) return getApps()[0];
return initializeApp(firebaseConfig);
};
export default initFirebase;
It might seem all right. And it is. I made this into an empty project and it actually work. (here the repo without the error).
I tried to replicate the error I have in my repo and I did it. This is the repo with the error. The error must be something with the packages, react or nextjs version, but I don't get it.
For simplicity You can take a look directly to the repos. I think the code is all right.
How do you think this error can be fixed?
P.S. the repos are also deployed on vercel, so you can try also to see the logs. Of course you can also make a PR.
I found out the problem is the last version of next (12.1.3).
In particular swcMinify. In fact, I had this option set to true into the file next.config.js. I also found out that there are several issues about swcMinify in production build. So, in order to solve the problem I described above, you just have to turn off swcMinify, or remove it. After that everything seems to be all right.
Conclusion: This is not a firebase error.
Related
I am currently stuck with a problem trying to fetch github repo data using the octokit npm package.
I use vite to run a dev server and when I try to make a request, the error that i get is:
Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
My React .tsx file looks like this:
import { Octokit, App } from 'octokit'
import React from 'react'
const key = import.meta.env.GITHUB_KEY
const octokit = new Octokit({
auth: key
})
await octokit.request('GET /repos/{owner}/{repo}', {
owner: 'OWNER',
repo: 'REPO'
})
export default function Repos() {
return (
<>
</>
)
}
I have redacted the information for privacy purposes.
If anyone knows how to resolve this issue with vite, please let me know!
Check first if this is similar to octokit/octokit.js issue 2126
I worked around this problem by aliasing node-fetch to isomorphic-fetch. No idea if it works for all usages within octokit, but works fine for my project.
You'll need to install the isomorphic-fetch dependency before making this config change.
// svelte.config.js
const config = { // ... kit: {
// ...
vite: {
resolve: {
alias: {
'node-fetch': 'isomorphic-fetch',
},
},
},
},
};
export default config;
Note: there are still questions about the support/development of octokit: issue 620.
I am working on a React project, in that I am implementing Microblink https://www.npmjs.com/package/#microblink/blinkcard-in-browser-sdk npm for scanning credit cards but when I run the project it is showing this kind of error Error during the initialization of the SDK! DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'
Please help to resolve this issue.
This is my code
import React from 'react';
import * as BlinkCardSDK from "#microblink/blinkcard-in-browser-sdk";
import './App.css';
const App = () => {
if (BlinkCardSDK.isBrowserSupported()) {
const loadSettings = new BlinkCardSDK.WasmSDKLoadSettings("sRwAAAYJbG9jYWxob3N0r/lOPmg/w35CpOHWK+o8YBgy/pGDcaB7TnbwT8mPpSzcCTWnV/AEyEIWVrcjyzdUSYb2bT0ccHxN4WDKrHoxoLQKBeq+ZukLOK13VwZXeikV4ggv2wrrW162/GIO5hajgqiEATKco+QfglS+OwguBweuacsuRR8UCD/YTdg4ysGMVljN7IIrthHPnmUa0SBOoeReXYvGmrKkVztIZzu9qkZoHu0UwCTN9Xloxa9Srw==");
BlinkCardSDK.loadWasmModule(loadSettings).then
(
(wasmSDK: BlinkCardSDK.WasmSDK) => {
},
(error: any) => {
// console.log('test')
console.log("Error during the initialization of the SDK!", error);
// console.log('testnew')
}
)
}
else {
console.log("This browser is not supported by the SDK!");
}
return (
<div>
</div>
)
}
export default App
If you have any questions please let me know.
Besides the license key, you also need to set the proper absolute path to the actual wasm and js support files of the SDK, a.k.a the engineLocation. The resource files need to be hosted somewhere accessible to the app.
There's a more detailed explanation of the SDK configuration in the documentation
Quick side note: it's probably not recommended to share your license key publicly, even if it's just a trial key.
I've built a React / Express app, and it runs pretty well on my local machine. The API is all hooked up, and Heroku recognises all of that, but when Heroku tries to map an array of objects to React components it fails with the following, deeply unhelpful error:
TypeError: d is null
h NoteList.jsx:130
React 8
ai
Bi
$l
Ou
xu
Su
vu
Qa
unstable_runWithPriority scheduler.production.min.js:18
React 5
Va
Qa
$a
fu
Ni
e NoteList.jsx:21
s runtime.js:63
_invoke runtime.js:293
E runtime.js:118
Babel 2
I've tried several solutions but nothing seems to work.
The repo is here, the app is live on Heroku.
The troublesome piece of code seems to be in client/src/Components/NoteList.jsx. It fetches notes from the local storage via localforage like so:
const getLocalNotes = async () => {
try {
setLoading(true)
const notes = await localforage.getItem("notes");
setLoading(false);
setNoteList(notes);
} catch (error) {
console.error(error);
}
}
...which seems to throw an error later at line 130:
{ loading ? <p>Loading</p> :
<div id="note-list">
{noteList.map(note =>
<Note
key={note.id}
id={note.id}
text={note.text}
deleteNote={deleteNote}
editNote={editNote} />
)}
</div>
}
I'm quite new to all of this -- this app is the final project of a full stack developer course -- so apologies if I've missed something obvious.
You can add a && condition as your noteList is coming as undefined and then you are applying map() on it, resulting in error -
Error - Cannot read property 'map' of null
Fix -
{noteList && noteList.map(x => <your code>)}
I'm following the feathersJS guide, but in TS and React and I've run into a problem trying to type the client object.
I've written the following code from the guide
import feathers from '#feathersjs/client';
import io from 'socket.io-client';
const socket = io();
const client = feathers();
client.configure(feathers.socketio(socket));
client.configure(feathers.authentication({
storage: window.localStorage
}));
And then a snippet from my top level React file I have and get a type error
useEffect(() => {
try {
return await client.reAuthenticate() // <- type error Property 'reAuthenticate' does not exist on type 'Application<any>'
}
})
I tried typing client as const client: Application = feathers(); but then I just get the type error Property 'reAuthenticate' does not exist on type 'Application<{}>'. How can I type client?
You need to use this #feathersjs/authentication-client library.
Run this commands npm install #feathersjs/authentication-client --save and follow this instruction.
#feathersjs/authentication-client declares reAuthenticate methods for you (see this).
I am working on a React app created with create-react-app. I was having trouble creating a web worker in it so I posted a question here on SO: Creating a web worker inside React
I've found a solution, as written in the post above, to load a worker without ejecting the app and messing with the Webpack config. This is the code, from the post above:
// worker.js
const workercode = () => {
self.onmessage = function(e) {
console.log('Message received from main script');
const workerResult = 'Received from main: ' + (e.data);
console.log('Posting message back to main script');
self.postMessage(workerResult);
}
};
let code = workercode.toString();
code = code.substring(code.indexOf("{")+1, code.lastIndexOf("}"));
const blob = new Blob([code], {type: "application/javascript"});
const worker_script = URL.createObjectURL(blob);
module.exports = worker_script;
and in the file that uses the worker:
import worker_script from './worker';
const myWorker = new Worker(worker_script);
myWorker.onmessage = (m) => {
console.log("msg from worker: ", m.data);
};
myWorker.postMessage('im from main');
It works, however, I cannot seem to get importScripts to work. Even if I do this (outside onmessage or inside onmessage):
if (typeof importScripts === 'function') {
importScripts('myscript.js');
}
In that case, the if statement turns out to be true, but then fails on the actual import with the same error message 'importScripts' is not defined as if the if statement is a false positive, which doesn't sound right. I'd say this is a context issue and that the worker probably isn't loading properly (although it seems to work), but it's just a guess.
Any ideas what's happening here?
importScripts in a worker created from Blob works fine, at least in 2021 (react 17.0.2, react-scripts 4.0.3, Chrome 92). The imported script URL must be absolute because worker was created from Blob.
The original issue might have been a bug in webpack or the transpilation might have changed the code in a weird way.
const workercode = () => {
importScripts("https://example.com/extra.js");
console.log(self.extraValue); // 10
self.onmessage = function(e) {
console.log('Message received from main script');
...
}
};
// extra.js
self.extraValue = 10;
Looks like this is still broken in 2022 - Seems there is a regression coming down the dev pipeline (at least in Android WebView and possibly some dev/canary chrome verions.)
https://bugs.chromium.org/p/chromium/issues/detail?id=1078821