Develop Reference

Invariant Violation Invalid hook call / cross-origin error

So after making this function work I started to create a loop that would give me feedback from the backend after SSR, I wanted to use hooks so I made it a functional component and started to write but the hook (even with nothing in it) is throwing 2 errors. Invalid Hook Call and A cross origin error was thrown.
I tried changing the file name to jsx, moving the file out of the folder I had because there was a second node modules in there (I thought it was using two versions of React), I also read somewhere just to clear local storage and it was just a in development using localhost problem.
*Edit So i've found that its not even calling the fn: reactToPdfUtils.savePDFNOW(sourceElement, true, undefined, cb) its stopping here
//reactToPdf.js
import React, {useEffect} from 'react';
import { savePDF } from '#progress/kendo-react-pdf';
import { drawDOM, exportPDF } from '#progress/kendo-drawing';
var ClassInstancesStore = require('../libs/goggles/reflux/classInstances-store');
var ClassInstancesActions = require('../libs/goggles/reflux/classInstances-actions');
export const savePDFNOW = (sourceElement, willSaveToDB, pageTemplate, cb) => {
//this hook broke the program as soon as i put it in even with nothing inside
useEffect(() => {
//Functionthat gets called after sending the pdf to the backend
// function onClassInstancesStoreChange(opInfo){
// var e = cloneDeep(opInfo);
// if (e.op === 'Call::StorePassportPDFToDisk') {
// if(e.error){
// console.log(e.ret)
// setPdf({ pdfErrors: e.ret })
// } else {
// console.log(e.ret)
// setPdf({ inProgress: true })
// alert('Successfully created: ' + e.ret.fileName)
// // onSubmit()
// }
// }
// };
// let listeners = [];
// listeners.push(ClassInstancesStore.listen(onClassInstancesStoreChange));
// return function cleanup() {
// _.each(listeners, function(listener) {listener();}); //NOTE: destroy listeners
// }
}, [])
try {
//do all the my functions that make my pdf perfect
} catch (error) {
//snap something went wrong all my awesome error handling
}
};
//previewer.jsx
var React = require('react');
var _ = require('underscore');
var reactToPdfUtils = require('../../../../../components/reactToPdf.js');
handleSave = (sourceElement) => {
reactToPdfUtils.savePDFNOW(sourceElement, true, undefined, cb)
function cb(sendDataContent){
if(sendDataContent.err){
console.log(sendDataContent.message)
} else {
console.log('sucess')
}
}
};

My understanding of the code is that the function handleSave will call the external hook savePDFNOW. If this is what happens, then this will break regardless of the useEffect logic.
The reason for that is that hooks that are extracted outside of the component require their name to start with use
So to allow the hook to run you change its name to useSavePDFNOW.
That being said, I believe this is not a valid use case for useEffect, think of useEffect as componentDidMount/Update. This is relevant to component render cycle rather than event listeners. It makes more sense to do away with the useEffect and keep it a regular function.
A few more things, if you are using the latest react version you don't need to import react. Also it's recommended to use const/let instead of var as well.

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

I have a problem with my webpack project, so I was trying to import one class to another and instantiate it but suddenly an error appear in my console and my program stopped working, it was this:
Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
This is the code of the class were I am trying to import my another class (that is PopUpPlugin):
import PopupPlugin from './popupPlugin.js';
export const addSearchBtnEvent = (weatherUI) => {
const searchBtn = document.querySelector('.weather__search');
searchBtn.addEventListener('click', () => {
weatherUI.style.opacity = '1';
weatherUI.style.visibility = 'visible';
})
}
export const addSearchExitEvent = (weatherUI) => {
const weatherExit = document.querySelector('.weather__search-exit');
weatherExit.addEventListener('click', () => {
weatherUI.style.opacity = '0';
weatherUI.style.visibility = 'hidden';
})
}
const popupObj = new PopupPlugin();
class searchDashboard {
constructor() {
}
setInputEvent() {
const inputSearch = document.querySelector('.weather__city-search');
const inputSearchBtn = document.querySelector('.weather__search-btn');
inputSearchBtn.addEventListener('click', () => {
const inputSearchVal = inputSearch.value;
this.validateStr(inputSearchVal);
});
}
validateStr() {
const onlyLettersAndSpaces = /^[a-zA-Z][a-zA-Z\s]*$/;
if(str.trim().length > 0 && str.match(onlyLettersAndSpaces)) {
const strValue = str.toLowerCase().trim().replace(' ', '+');
this.popupObj.searchCoincidences(strValue, 'weather__search-ui');
}
}
}
export default searchDashboard;
I don't actually know why this is happening, I also tried to instantiate it inside the constructor and it worked but it sended me the error of an stack overflow.
PD: If someone needs it here is the code of the PopupPlugin. (Here is what was working to me that was instantiating the class inside the constructor until the stack overflow error appeared)
import ManageWeatherDashboard from './manageWeatherDashboard.js';
import { getFetch, repeatAppend } from './weatherHelpers.js';
class popupPlugin {
constructor() {
this.manageWeatherDashboardObj = new ManageWeatherDashboard();
}
validateStr(str) {
const onlyLettersAndSpaces = /^[a-zA-Z][a-zA-Z\s]*$/;
if(str.trim().length > 0 && str.match(onlyLettersAndSpaces)) {
const strValue = str.toLowerCase().trim().replace(' ', '+');
return strValue;
}
}
searchCoincidences(val, parent) {
getFetch(`https://www.metaweather.com/api/location/search/?query=${val}`)
.then(res => res.text())
.then(data => {
const parentResults = document.querySelector('.'+parent);
parentResults.innerHTML = '';
const dataArr = JSON.parse(data)
if(dataArr.length >= 15) {
let resVal;
for(let i = 0; i <= 15; i++) {
resVal = this.addDOMResultCoincidences(parent, dataArr[i].title,
dataArr[i].woeid);
}
this.whenClickCoincidence(resVal);
} else {
let resVal;
dataArr.forEach(el => {
resVal = this.addDOMResultCoincidences(parent, el.title, el.woeid);
})
this.whenClickCoincidence(resVal);
}
})
}
addDOMResultCoincidences(parentBlock, name, id) {
const args = Array.from(arguments);
if(args[0] === 'popup__results') {
const popupResults = document.querySelector('.popup__results');
const divResult = document.createElement('div');
divResult.className = 'popup__result';
divResult.setAttribute('data-woeid', id);
const spanResultName = document.createElement('span');
spanResultName.className = 'popup__result-name';
const cityReturn = document.createTextNode(args[1]);
spanResultName.appendChild(cityReturn);
divResult.appendChild(spanResultName);
popupResults.prepend(divResult);
return divResult;
}
if(args[0] === 'weather__search-ui') {
const weatherUI = document.querySelector('.weather__search-ui');
const divResult = document.createElement('div');
divResult.className = 'weather__search-result';
divResult.setAttribute('data-woeid', id);
const spanResultName = document.createElement('span');
const spanResultNameText = document.createTextNode(args[1]);
spanResultName.className = 'weather__city-result';
spanResultName.appendChild(spanResultNameText);
const iconResult = document.createElement('i');
iconResult.className = 'fa fa-arrow-right weather__go-result';
repeatAppend([spanResultName, iconResult], divResult);
weatherUI.appendChild(divResult);
return divResult;
}
}
// When click a coincidence in search field
whenClickCoincidence(el) {
const woeId = el.getAttribute('data-woeid');
el.addEventListener('click', () => {
let handler = 0;
if(handler === 0) {
getFetch(`https://www.metaweather.com/api/location/${woeId}/`)
.then(res => res.json())
.then(data => {
const popup = document.querySelector('.popup');
const weatherNext6Days = data.consolidated_weather;
this.manageWeatherDashboardObj.changeWeatherBar(weatherNext6Days[0], data.title);
weatherNext6Days.slice(1, 6).forEach(el => {
this.manageWeatherDashboardObj.nextFiveDays(el);
})
this.manageWeatherDashboardObj.updateStadistics(weatherNext6Days[0]);
popup.style.opacity = '0';
popup.style.visibility = 'hidden';
})
}
handler += 1;
})
}
}
export default popupPlugin;

This might be caused by a cyclic dependencies (i.e. moduleA imports module B and vice versa at the same time). Take a deeper look at your code.

I faced the same issue when I moved the import statement for the redux store below some import of a local module that was dealing with some reducer reference from of the store. Moving the import store from ./store upwards resolved this issue for me.
Try fixing the order of imports in your files.

Had this problem, after upgrading from webpack 4 to webpack 5, and, yes, it was a circular dependency in my case.
Furthermore I found this blog How to Eliminate Circular Dependencies from Your JavaScript Project which led me to https://github.com/aackerman/circular-dependency-plugin
Plopped the plugin into my webpack dev config, as per sample on github, then spent some time reading its output figuring out where I went wrong. Fixing things was pretty easy once I knew the problem - it had been a pretty basic error.
circular-dependency-plugin#5.2.2 works on webpack 4 apparently, and I can confirm it works on webpack#5.73.0 as well. Saved me lots of time :-) You can take it out of webpack dev config after it's done its work.

In my case, it was due to circular import. Meaning, that two modules are exporting and importing contents form each other

For anyone whose issue is not a circular dependency, it could also be a missing import.
In my case, using Material UI 5, I forgot the line import { styled } from "#mui/styles";, which gave me this error:
Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
instead of the usual ReferenceError: MyModule is not defined missing import error.

Using my IDE auto import I had something like:
import useStore, { useCart } from "../lib/store"
Everything was working fine for awhile! But then I got the same error until I changed my import to be like this:
import { useStore, useCart } from "../lib/store"

in my case, I was just trying to call the dispatch function before the store had fully loaded - i.e. store.dispatch()

Have same issue in nextjs project.
Switching to previous versions or reinstalling node_modules/ - did not help.
Solution - remove build/ directory and restart build.

In my case, it was the entry-point file that used the following syntax:
export default <symbol>;

Maybe because you used circle import.
For me, I used encapsulated axios to request in mobx store, and I also used some data from mobx store in encapsulated axios.

This isn't exactly what's causing the same error to occur for me.
Mine were caused by calling things like useState, useEffect and firebase() outside the main functional Component Block. This is very dumb but I somehow completely missed it.
Hope it helps anyone from the future who had the same problem as mine.

How to run server-sent events in svelte component in sapper

I have a svelte component named [symbol].svelte in which I want to initiate a connection to a streaming service to receive server-sent events. I've not found a way to do this successfully.
Since EventSource only runs in the browser, I initialized it in the onMount function like so:
<script>
export let quote;
let sse = {};
onMount(async () => {
sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
sse.onmessage = (event) => {
let response = JSON.parse(event.data);
if(!response.length) return;
quote = response[0];
}
});
onDestroy(() => {
if(sse.readyState && sse.readyState === 1) {
sse.close();
}
})
</script>
<div>{quote.symbol}</div>
This works fine, except when I navigate to another route that uses the same component- since the component doesn't unmount and remount, onMount() doesn't fire and thus doesn't instantiate a new SSE request. I don't know of any way to easily force the component to remount, which would be simplest (relevant github issue here)
Another try was using a reactive statement like so:
<script>
export let quote;
let sse = {};
$: {
if(process.browser === true) { //again, this stuff won't run on the server
if(sse.readyState && sse.readyState === 1) {
sse.close();
}
sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
}
}
sse.onmessage = (event) => {
let response = JSON.parse(event.data);
quote = response[0];
console.log(quote);
}
</script>
<div>{quote.symbol}</div>
When changing routes, the quote variable changed, thus triggering the reactive statement to kill the existing SSE and instantiate a new one. Exceptthe onmessage handler wouldn't fire, probably because the onmessage handler gets attached before the eventsource object is created.
Last take was to try with the onmessage handler in the reactive statement like so:
<script>
export let quote;
let sse = {};
$: {
if(process.browser === true) { //again, this stuff won't run on the server
if(sse.readyState && sse.readyState === 1) {
sse.close();
}
sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
sse.onmessage = (event) => {
let response = JSON.parse(event.data);
quote = response[0];
console.log(quote);
}
}
}
</script>
<div>{quote.symbol}</div>
The problem here is that since quote gets reassigned as a product of the onmessage handler, the reactive statement keeps firing circularly.
At this point I'm at a loss, any input would be appreciated!

It sounds like you want to use {#key ...}, which causes its contents to be torn down and recreated when the value changes, including components:
{#key quote}
<!-- destroyed and recreated whenever `quote` changes -->
<Quote {quote}/>
{/key}
Docs here: https://svelte.dev/docs#key
Incidentally, using onDestroy is unnecessary if it's only used to clean up work that happens in onMount:
onMount(() => {
const sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
sse.onmessage = (event) => {
let response = JSON.parse(event.data);
if(!response.length) return;
quote = response[0];
}
};
return () => {
if(sse.readyState === 1) {
sse.close();
}
});
});
This is better because you don't have the top-level sse variable, and because the returned cleanup function only needs in the browser, you don't need to have the placeholder ssr = {} assignment or check for sse.readyState.

Websockets in Sapper

I have a readable store in Svelte that looks like this:
const state = {};
export const channels = readable(state, set => {
let st = state;
let socket = new WebSocket("ws://127.0.0.1:5999");
socket.onmessage = function (event) {
var datastr = event.data.split(':');
st[datastr[0]].value = datastr[1];
st[datastr[0]].timestamp = Date.now();
set(st)
};
return () => {
socket.close()
}
});
When I import it to my Svelte App works. But if I put that App.svelte as my index.svelte running on Sapper, it doesnt work at first. It says error 500 websocket is not defined. Once I reload the page in the browser start to work...
I have try to parse a function that creates the store instead:
export const getChannel = () => {
// here my store
return {...store}
}
and then creating the store inside a onMount() like this:
onMount( ()=> {
const channel = getChannel();
});
But doesnt seem to do the trick... What do I miss?
Note: If a just replace the store by a simple writable, and create the websocket onMount(), it works without any problem. I just only wanted to put all the communication inside the store as a readable...

In Sapper, code in components (or imported into components) is executed in Node during server-side rendering unless it's put inside onMount (which doesn't run on the server, because there's no 'mounting' happening) or an if (process.browser) {...} block, or something equivalent.
That includes things like references to $channels causing channels.subscribe(...) to be called during initialisation.
Since there's no WebSocket global in Node, creating that subscription will fail. The simplest workaround is probably a simple feature check:
const state = {};
export const channels = readable(state, (set) => {
if (typeof WebSocket === 'undefined') return;
let st = state;
let socket = new WebSocket("ws://127.0.0.1:5999");
socket.onmessage = function (event) {
var datastr = event.data.split(":");
st[datastr[0]].value = datastr[1];
st[datastr[0]].timestamp = Date.now();
set(st);
};
return () => {
socket.close();
};
});

React-Flux: Error with AppDispatcher.register

I am trying to set up the most basic app in Flux-React. Its sole goal to is fire an Action, which gets sent through the Dispatcher to a Store that has registered with the Dispatcher. The store the logs the payload to Console.
Everything besides the Store is working well, but as soon as it hits AppDispatcher.register, Flux throws the following error:
Uncaught TypeError: Cannot set property 'ID_1' of undefined
Here is the code of the file causing the error, but I've put up the entire project at https://github.com/bengrunfeld/react-flux-dispatcher-error, and you can find the offending file in src/js/stores/AppStores.js
var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var AppConstants = require('../constants/AppConstants');
var assign = require('object-assign');
var CHANGE_EVENT = 'change';
var AppStore = assign({}, EventEmitter.prototype, {
emitChange: function() {
this.emit(CHANGE_EVENT);
}
});
AppDispatcher.register(function(payload){
console.log(payload);
return true;
})
module.exports = AppStore;

Because of the drought of documentation of biblical proportions for Facebook Flux, I didn't know that I was using code from previous versions.
In AppDispatcher.js, you need to define AppDispatcher in the following way using the new keyword:
var Dispatcher = require('flux').Dispatcher;
var assign = require('object-assign');
var AppDispatcher = assign(new Dispatcher(), {
handleViewAction: function(action) {
this.dispatch({
source: 'VIEW_ACTION',
action: action
});
}
});
module.exports = AppDispatcher;
Here is a link to a repository with the working code: https://github.com/bengrunfeld/react-flux-simple-app