Highcharts errors: "Cannot read property 'addEvent' of undefined" and more - reactjs

I'm using Highchart stock and got those errors in Chrome console although the chart seems to work fine.
GET https://code.highcharts.com/indicators/indicators-all.js net::ERR_ABORTED 403
log.js:24 [HMR] Waiting for update signal from WDS...
summary:47 GET https://code.highcharts.com/indicators/indicators-all.js net::ERR_ABORTED 403
drag-panes.src.js:46 Uncaught TypeError: Cannot read property 'addEvent' of undefined
at drag-panes.src.js:46
at m (drag-panes.src.js:29)
at drag-panes.src.js:32
at drag-panes.src.js:23
at drag-panes.src.js:12
(anonymous) # drag-panes.src.js:12
m # drag-panes.src.js:12
(anonymous) # drag-panes.src.js:12
(anonymous) # drag-panes.src.js:12
(anonymous) # drag-panes.src.js:12
annotations-advanced.src.js:37 Uncaught TypeError: Cannot read property 'addEvent' of undefined
at annotations-advanced.src.js:37
at t (annotations-advanced.src.js:28)
at annotations-advanced.src.js:31
at annotations-advanced.src.js:22
at annotations-advanced.src.js:11
(anonymous) # annotations-advanced.src.js:11
t # annotations-advanced.src.js:11
(anonymous) # annotations-advanced.src.js:11
(anonymous) # annotations-advanced.src.js:11
(anonymous) # annotations-advanced.src.js:11
price-indicator.src.js:42 Uncaught TypeError: Cannot read property 'addEvent' of undefined
at price-indicator.src.js:42
at c (price-indicator.src.js:29)
at price-indicator.src.js:32
at price-indicator.src.js:23
at price-indicator.src.js:12
(anonymous) # price-indicator.src.js:32
c # price-indicator.src.js:12
(anonymous) # price-indicator.src.js:12
(anonymous) # price-indicator.src.js:12
(anonymous) # price-indicator.src.js:12
full-screen.src.js:40 Uncaught TypeError: Cannot read property 'addEvent' of undefined
at full-screen.src.js:40
at c (full-screen.src.js:29)
at full-screen.src.js:32
at full-screen.src.js:23
at full-screen.src.js:12
(anonymous) # full-screen.src.js:12
c # full-screen.src.js:12
(anonymous) # full-screen.src.js:12
(anonymous) # full-screen.src.js:12
(anonymous) # full-screen.src.js:12
stock-tools.src.js:124 Uncaught TypeError: Cannot read property 'addEvent' of undefined
at stock-tools.src.js:124
at q (stock-tools.src.js:29)
at stock-tools.src.js:88
at stock-tools.src.js:23
at stock-tools.src.js:12
Here is my package.json regarding highcharts:
"highcharts": "^8.1.0",
"highcharts-react-official": "^3.0.0",
Here is how I create the chart in react component:
import HighStock from "highcharts/highstock"
import HighchartsReact from "highcharts-react-official"
import indicatorsAll from "highcharts/indicators/indicators-all"
import annotationsAdvanced from "highcharts/modules/annotations-advanced"
import priceIndicator from "highcharts/modules/price-indicator"
import fullScreen from "highcharts/modules/full-screen"
import stockTools from "highcharts/modules/stock-tools"
indicatorsAll(HighStock)
annotationsAdvanced(HighStock)
priceIndicator(HighStock)
fullScreen(HighStock)
stockTools(HighStock)
<HighchartsReact highcharts={HighStock} constructorType={"stockChart"} options={options} />

Related

MERN (Axios): Uncaught TypeError (data is not defined)

I am new to MERN stack and I am trying to build a login/registration system on the stack.
When I am trying to make a post request it is throwing this error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
at registrationHandler (Register.jsx:47:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
at executeDispatch (react-dom.development.js:8243:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
at processDispatchQueue (react-dom.development.js:8288:1)
at dispatchEventsForPlugins (react-dom.development.js:8299:1)
at react-dom.development.js:8508:1
registrationHandler # Register.jsx:47
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError # react-dom.development.js:4070
executeDispatch # react-dom.development.js:8243
processDispatchQueueItemsInOrder # react-dom.development.js:8275
processDispatchQueue # react-dom.development.js:8288
dispatchEventsForPlugins # react-dom.development.js:8299
(anonymous) # react-dom.development.js:8508
batchedEventUpdates$1 # react-dom.development.js:22396
batchedEventUpdates # react-dom.development.js:3745
dispatchEventForPluginEventSystem # react-dom.development.js:8507
attemptToDispatchEvent # react-dom.development.js:6005
dispatchEvent # react-dom.development.js:5924
unstable_runWithPriority # scheduler.development.js:468
runWithPriority$1 # react-dom.development.js:11276
discreteUpdates$1 # react-dom.development.js:22413
discreteUpdates # react-dom.development.js:3756
dispatchDiscreteEvent # react-dom.development.js:5889
My code is as follows:
This is being called on Form Submit
When I am making the same request from Postman it happens successfully:
Please any help is appreciated...
I was importing Axios as
import { axios } from 'axios'
which should be
import axios from 'axios'.
Also, history.push() was replaced by useNavigate('/') in v6 of react-router-dom.
Lastly at line 30, it should be data.data.token.

Spring React Chrome CORS error when accessed outside router

I use Chrome as my default browser. I have cross origins configured in my Spring backend and React front end.
Spring: #CrossOrigin(origins = "http://localhost:3000")
React: const USER_API_BASE_URL = "http://localhost:8080/api/v1/users";
All works great when I am working on my PC. I configured NOIP and configured my router to route incoming to my development PC. When I start a session using the external address I get the CORS error:
...
Access to XMLHttpRequest at 'http://localhost:8080/api/v1/users' from origin 'http://TESTURL.ddns.net:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
xhr.js:187 GET http://localhost:8080/api/v1/users net::ERR_FAILED
dispatchXhrRequest # xhr.js:187
xhrAdapter # xhr.js:13
dispatchRequest # dispatchRequest.js:53
request # Axios.js:108
Axios.<computed> # Axios.js:129
wrap # bind.js:9
getUsers # UserService.js:8
componentDidMount # LoginComponent.jsx:19
commitLifeCycles # react-dom.development.js:19816
commitLayoutEffects # react-dom.development.js:22805
callCallback # react-dom.development.js:188
invokeGuardedCallbackDev # react-dom.development.js:237
invokeGuardedCallback # react-dom.development.js:292
commitRootImpl # react-dom.development.js:22543
unstable_runWithPriority # scheduler.development.js:653
runWithPriority$1 # react-dom.development.js:11039
commitRoot # react-dom.development.js:22383
finishSyncRender # react-dom.development.js:21809
performSyncWorkOnRoot # react-dom.development.js:21795
scheduleUpdateOnFiber # react-dom.development.js:21190
updateContainer # react-dom.development.js:24375
(anonymous) # react-dom.development.js:24760
unbatchedUpdates # react-dom.development.js:21905
legacyRenderSubtreeIntoContainer # react-dom.development.js:24759
render # react-dom.development.js:24842
(anonymous) # index.js:8
./src/index.js # index.js:19
__webpack_require__ # bootstrap:856
fn # bootstrap:150
1 # reportWebVitals.js:14
__webpack_require__ # bootstrap:856
checkDeferredModules # bootstrap:45
webpackJsonpCallback # bootstrap:32
(anonymous) # main.chunk.js:1
Show 4 more frames
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:99)
...
Is there a way around this?
The solution was
In the React front end changing
const USER_API_BASE_URL = "http://localhost:8080/api/v1/documenttype";
to
const USER_API_BASE_URL = "http://XXsystem.ddns.net:8080/api/v1/documenttype";
In the Spring backend changing
#CrossOrigin("http://localhost:3000")
to
#CrossOrigin(origins = "http://XXsystem.ddns.net:3000")
Interesting that the 'localhost testing still work !
Best of both worlds.

process.env.REACT_APP_KEY not working with api calls

So far in 2 projects I created a .env file in the root of my project. I install npm install dotenv. I place (e.g.)REACT_APP_KEY='123456' in the env file . In my app.js file I add require("dotenv").config() in my component where I am making the api call i console.log(process.env.REACT_APP_KEY) in the the console I get 123456. So far it looks like its working. But when I place the process.env.REACT_APP_KEY in the api call I get 404 error? What am i missing? If I remove process.env.REACT_APP_KEY and add 123456, I get no error and the call works. Is it because I am using axios to get the data, should i use fetch? I can't seem to find anything that can help me with this. I included my error below.
thank you.
xhr.js:177 GET https://api.unsplash.com/search/photos?query=bali 401
dispatchXhrRequest # xhr.js:177
xhrAdapter # xhr.js:13
dispatchRequest # dispatchRequest.js:52
Promise.then (async)
request # Axios.js:61
Axios.<computed> # Axios.js:76
wrap # bind.js:9
getImages # App.js:12
onSearchSubmit # App.js:20
App # App.js:22
renderWithHooks # react-dom.development.js:14985
mountIndeterminateComponent # react-dom.development.js:17811
beginWork # react-dom.development.js:19049
beginWork$1 # react-dom.development.js:23940
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
(anonymous) # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
(anonymous) # index.js:7
./src/index.js # index.js:18
__webpack_require__ # bootstrap:856
fn # bootstrap:150
1 # reportWebVitals.js:14
__webpack_require__ # bootstrap:856
checkDeferredModules # bootstrap:45
webpackJsonpCallback # bootstrap:32
(anonymous) # main.chunk.js:1
createError.js:16 Uncaught (in promise) Error: Request failed with status code 401
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)

Uncaught (in promise) Error: Request failed with status code 400 when spring app is hosted on localhost

I am trying to access a spring boot micro-service hosting on localhost but I am getting following error:
Uncaught (in promise) Error: Request failed with status code 400
Following is my code to access the service:
import axios from "axios";
export const addProjectTask = (project_task, history) => async dispatch => {
await axios.post("http://localhost:8080/api/board", project_task);
history.push("/");
};
I have tried to search on the internet but I am not able to find any solution with the localhost. When I use the above URL in Postman it works fine so the URL is correct.
Edit:
Complete Error:
xhr.js:178 POST http://localhost:8080/api/board 400
dispatchXhrRequest # xhr.js:178
xhrAdapter # xhr.js:12
dispatchRequest # dispatchRequest.js:52
Promise.then (async)
request # Axios.js:61
Axios.<computed> # Axios.js:86
wrap # bind.js:9
(anonymous) # projectTaskActions.js:4
(anonymous) # index.js:8
(anonymous) # redux.js:477
onSubmit # AddProjectTask.js:31
callCallback # react-dom.development.js:188
invokeGuardedCallbackDev # react-dom.development.js:237
invokeGuardedCallback # react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError # react-dom.development.js:306
executeDispatch # react-dom.development.js:389
executeDispatchesInOrder # react-dom.development.js:414
executeDispatchesAndRelease # react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel # react-dom.development.js:3287
forEachAccumulated # react-dom.development.js:3259
runEventsInBatch # react-dom.development.js:3304
runExtractedPluginEventsInBatch # react-dom.development.js:3514
handleTopLevel # react-dom.development.js:3558
batchedEventUpdates$1 # react-dom.development.js:21871
batchedEventUpdates # react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem # react-dom.development.js:3568
attemptToDispatchEvent # react-dom.development.js:4267
dispatchEvent # react-dom.development.js:4189
unstable_runWithPriority # scheduler.development.js:653
runWithPriority$1 # react-dom.development.js:11039
discreteUpdates$1 # react-dom.development.js:21887
discreteUpdates # react-dom.development.js:806
dispatchDiscreteEvent # react-dom.development.js:4168

md contact chips css not working

I am using md contact chips and my template looks like this
<md-chips ng-model="ser" md-autocomplete-snap
md-require-match="true">
<md-autocomplete
ng-disabled="autoCompleteOptions.isDisabled"
md-no-cache="autoCompleteOptions.noCache"
md-selected-item="si"
md-search-text="searchText"
md-items="sellable in getSellableByFilter(searchText)"
md-min-length="1"
md-item-text="sellable.name"
placeholder="Search for a Service/Package here"
md-select-on-match="true",
>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
Searching works fine but when I select an item, it looks like input field only and there is no chip like css attached.
How do I fix this?
I tried using md contact chips as well but still same issue.
error message I see in console
angular.js:14800 TypeError: Cannot read property 'some' of undefined
at MdChipsCtrl.appendChip (angular-material.js:27822)
at MdChipsCtrl.<anonymous> (angular-material.js:28128)
at angular.js:1383
at angular-material.js:25732
at Array.forEach (<anonymous>)
at handleSelectedItemChange (angular-material.js:25732)
at angular-material.js:25694
at processQueue (angular.js:17169)
at angular.js:17217
at Scope.$digest (angular.js:18352) "Possibly unhandled rejection: {}"
(anonymous) # angular.js:14800
(anonymous) # angular.js:11218
processChecks # angular.js:17199
$digest # angular.js:18352
(anonymous) # angular.js:18581
completeOutstandingRequest # angular.js:6428
(anonymous) # angular.js:6707
setTimeout (async)
Browser.self.defer # angular.js:6705
$evalAsync # angular.js:18579
(anonymous) # angular.js:17041
scheduleProcessQueue # angular.js:17217
then # angular.js:17138
getDisplayValue # angular-material.js:25907
(anonymous) # angular-material.js:26070
(anonymous) # angular-material.js:1730
processQueue # angular-material.js:1727
(anonymous) # angular.js:20566
completeOutstandingRequest # angular.js:6428
(anonymous) # angular.js:6707
setTimeout (async)
Browser.self.defer # angular.js:6705
timeout # angular.js:20564
nextTick # angular-material.js:1711
positionDropdown # angular-material.js:25453
handleResults # angular-material.js:26273
handleQuery # angular-material.js:26251
focus # angular-material.js:25824
fn # VM61232:4
callback # angular.js:27475
$digest # angular.js:18352
$apply # angular.js:18649
(anonymous) # angular.js:27480
dispatch # jquery.js:5206
elemData.handle # jquery.js:5014
Your model has to be of type Array, and perhaps in your controller you're not initializing it to anything (it's undefined).
ser = []

Resources