Develop Reference

why does using the predict method in ml5 throw an error?

im trying to mess with nural networks and i decided to use ml5, everything is great except i cant get the model to predict without it making an error.
ive tried putting the prediction inside an async function ad resolving its promise but it didnt help at all, tried messing with the inputs, still nothing changes
the eror in question:
TypeError: Cannot read properties of undefined (reading 'undefined')
at isOneHotEncodedOrNormalized (webpack://ml5/src/NeuralNetwork/index.js:449:33)
at this.isOneHotEncodedOrNormalized (webpack://ml5/src/NeuralNetwork/index.js:401:20)
at this.isOneHotEncodedOrNormalized (webpack://ml5/src/NeuralNetwork/index.js:400:31)
at _input.every (webpack://ml5/src/NeuralNetwork/index.js:432:18)
at predictInternal (webpack://ml5/src/NeuralNetwork/index.js:923:27)
at tryCatch (webpack://ml5/node_modules/#babel/runtime/node_modules/regenerator-runtime/runtime.js:63:14)
at context.dispatchException (webpack://ml5/node_modules/#babel/runtime/node_modules/regenerator-runtime/runtime.js)
at define (webpack://ml5/node_modules/#babel/runtime/node_modules/regenerator-runtime/runtime.js)
at asyncGeneratorStep (webpack://ml5/node_modules/#babel/runtime/helpers/asyncToGenerator.js)
im using https://unpkg.com/ml5#latest/dist/ml5.min.js if this helps, i dont know if the error was caused by my code or the ml5 code or what

Prevent React JS from overriding scripts

I'm not that experienced with JavaScript, however, I am familiar enough to navigate and write my own code.
I've been spending a lot of time trying to figure out an issue I'm getting with HTTP requests, only to recently realize that it's likely a specific script other that might causing this.
It looks as though it may be React JS.
I'm not familiar with this.
(I did look it up, and searched a lot for any no-conflict options)
Basically, from the moment I execute "XMLHttpRequest.prototype.open" to monitor incoming HTTP requests, all of my scripts appear to be passing through a React JS file.
I assume this, because I'm logging the steps and results of my script in the browser's console, and they are all being attributed to "commons-##########.js" from the moment I run that XMLHttpRequest.prototype.
I see this in the header of the commons-##########.js file:
/** #license React v16.4.1
* react-dom.production.min.js
*
* Copyright (c) 2013-present, Facebook, Inc.
The problem is that it appears to be affecting my own scripts from functioning properly.
Does anyone know why this might happen, and how it could be fixed?
I'd like my JS scripts to run without interference from React JS.
(It's not my own website, but a website I regularly use for business. The modifications are to assist me, nothing malicious.)
Thank you.
Please note that I'm aware that the commented portion I highlighted will not affect my code. I only put that to explain why I believe it's a React JS script that is causing the problem.
This is what the actual error looks like in the console (a portion of it):
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
a # commons-9702d5b….js:34
XMLHttpRequest.send (async)
XMLHttpRequest.send # VM14804:70
(anonymous) # commons-9702d5b….js:34
(anonymous) # commons-9702d5b….js:34
I've tried many methods, and I don't see any issue with why I cannot JSON parse the response, or do many other things.
Something about that code is interfering with my own.
The JS script is a long, minified file, so it would be difficult to pin down a lone offending portion of code.

I'm 99.99% sure the problem isn't with React. The commons-#.js file is the result of your scripts being bundled with any 3rd party libraries you're using (like React) into one file for efficient loading from a web server - it's standard practice, and very unlikely to cause any issues. The /** #license React v16.4.1 comment you're seeing at the top of the file is simply because the bundling process has been configured to retain license information in the output.

The problem is caused by JSON response that was received in wrong form from a server or was incorrectly transformed.
Unexpected token o in JSON at position 1
error means that [object ...] string (the result of coercion of an object to a string) was passed to JSON.parse. It's unknown where this error originates from. XHR requests can be checked in devtools Network tab to identify whether the problem was caused by wrong response, so it could be reported to API owner.
The problem isn't caused by React. React itself can't do anything like that, it's UI library. It doesn't use XMLHttpRequest in any way. The error is caused by some piece of code that uses both React and XHR. It likely can be debugged in this part of a stack:
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
The problem needs to be fixed by a party this code belongs to - website owner, another browser extension, third-party components you're using, etc.

React with Firebase authentication

I'm trying to set up react with firebase authentication.
There is a problem with the registration page. When I comment out the registration page, my local page renders without any issues. When I uncomment this page, I get an error that says:
npm.js:341 Uncaught TypeError: Cannot read property 'app' of undefined
at new hm (npm.js:341)
at Object.<anonymous> (RegisterPage.js:12)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at Object.defineProperty.value (AppRouter.js:10)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at Object.<anonymous> (app.js:7)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at Object.<anonymous> (bundle.js:50999)
at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
at module.exports (bootstrap 5a6a0f74168ebcba0a5a:62)
I have tried to recreate the minimum part of the app in this code sandbox: https://codesandbox.io/s/6w2r0267kk. However, I am getting an error in code sandbox that says: TypeError - Could not fetch dependencies, please try again in a couple seconds: Failed to fetch. This error takes about 2 hours to appear each time, and has repeated 3 times now. I'm not sure if I'm doing something wrong in trying to use that tool.
Others who have encountered the same error message as me have suggested that 'this' may not be correctly defined: Uncaught TypeError: Cannot read property 'app' of undefined
For me, that const is assigned in row 22. Searching further into that line of enquiry, people note that this is an ES5 expression that should be updated for ES6 - and then leads down a path of reasoning that suggests this isn't a useful method to use in ES6. I'm not sure if trying to figure that out is part of the process toward a solution for me.
When I just use the code sandbox on the Register Page, a syntax error in the return statement that starts at line 78 is indicated, but I can't see what's wrong with that.
Can anyone help with examples of how to get started with Firebase authentication in react (with a pending flag on user sign ups). I didn't write this code myself and struggle to understand the basics at the best of times, so I'd like to try to figure this out as a learning exercise, but if it's not a sound basis, then I'd also appreciate that advice.

The error is because you are not exporting/importing your firebase auth object properly.
Print the auth variable imported on line 4 of RegisterPage.js and you'll see it is undefined:
import { firebase, auth } from "../../firebase/firebase";
Check the path is correct and that the default export from firebase.js has an auth property.

Find cause of AngularJS $injector:strictdi error messages

I'm getting an error message in a fairly complex app, but Angular does not provide a filename or line number indicating where the error was thrown initially. I have gotten used to this with Angular and I've been able to find the cause of errors nonetheless in the past, but not this time. This is the error:
Error: [$injector:strictdi] http://errors.angularjs.org/1.6.1/$injector/strictdi?p0=function(%24compile)
at angular.js:38
at Function.eb.$$annotate (angular.js:4072)
at e (angular.js:4799)
at Object.invoke (angular.js:4834)
at angular.js:7943
at q (angular.js:357)
at Object.<anonymous> (angular.js:7941)
at Object.invoke (angular.js:4842)
at Object.$get (angular.js:4676)
at Object.invoke (angular.js:4842)
We're using $compile in a lot of different places in our app, including a number of third party directives/modules. My question is: is there any way to find the piece of code that's causing this error? I have been searching for '$compile' in my source code, but that gives me so many results that it doesn't really help.
Is there any way to enable better stack traces including my own source, not just AngularJS functions? If this does not exist, I'd like to know it too and I'll have to find another way to fix this, but I hope I'm not missing something here.

Tracking Down the Cause of an Error in React.js

I have an error coming up in React.js that only occurs under very specific circumstances.
When I create the error, an error prints to the JS console in Chrome, but it's not particularly semantic.
What are the best practices, tips, and tricks that you use for tracking down the offending line or function in a React.js context?
The value at line 61 doesn't seem to make a lot of sense due to the 10247 prefix – is this truly referring to line 61 or is this just junk due to a botched source map or something?
Unhandled rejection TypeError: Cannot set property 'value' of undefined
at http://localhost:4000/js/analytics.js:10247:61
at Array.forEach (native)
at http://localhost:4000/js/analytics.js:10246:16
at Array.forEach (native)
at updatePoints (http://localhost:4000/js/analytics.js:10245:29)
at module.exports.createClass.classData.componentWillReceiveProps (http://localhost:4000/js/analytics.js:10195:9)
at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42736:14)
at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
at Object.89.ReactReconciler.receiveComponent (http://localhost:4000/js/vendor.js:50301:22)
at Object.__REACT_INSPECTOR_RUNTIME__0_13_1.React.ReactReconciler.receiveComponent (<anonymous>:118:43)
at 43.ReactCompositeComponentMixin._updateRenderedComponent (http://localhost:4000/js/vendor.js:42865:23)
at 43.ReactCompositeComponentMixin._performComponentUpdate (http://localhost:4000/js/vendor.js:42843:10)
at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42759:12)
at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
Thanks in advance for your help!

Yupe, split your code into individual files and try using browserify (or webpack) with the debug flag set to true in order to map your big file with a sourcemap and ease the debugging in Chrome and friends.
Check my current stack here:
https://github.com/coma/domno?files=1

It turned out that it was an issue with Reconciliation in React.js.
React essentially uses heuristics to decide what to re-render on updates, and the react-chartjs library wasn't playing well with that.
More information can be found here: https://facebook.github.io/react/docs/reconciliation.html
The fix I used was essentially to clear the state data that is passed into chart and force an update, thus making React re-render the whole element:
this.state.countries = {
labels: []
}
this.forceUpdate()