Cannot read property 'push' of undefined

[johnraz]

Hi ! I spent quite a lot of time digging this today but I'm helpless... I have a demo project running that does all I want, but on my actual project I cannot get this to work I keep having the following error when doing any change to a hot-reloaded file.

Uncaught TypeError: 
Cannot read property 'push' of undefined(anonymous function) @ (index):529
(anonymous function) @ (index):521
updateDepMap @ (index):519
ChangeHandler @ (index):488
exports.default @ (index):649
socket.onmessage @ (index):625

I checked all the dependencies between the 2 project and they look the same. It does happen because of a jsx file...

When removing references to the jsx files I don't get the error anymore but hot reloading is not working, I get a full reload instead.

any pointer ?

[geelen]

Hmm, I've had this problem too, and I think this commit fixes it: https://github.com/geelen/jspm-server/commit/93a4de1e1519fc830c880085c7396c4cd4ec2f42#diff-44345f3140d8002f24162547393106f5L37

You'll need to be on at least 0.1.2 for this change to apply. Run npm install -g jspm-server to update and see if the same error applies?

[johnraz]

Ok, upgrading did push me a step further ! Reloading standard es6 js is ok. \o/

It still complains about jsx though :/

Change detected in app.jsx that cannot be handled gracefully: Change occurred to a file outside SystemJS loading
(index):603 Reloading in 2...

This is what I get while debugging in chrome's console:

> this.moduleMap.has('app.jsx!github:floatdrop/plugin-jsx@1.1.0')
> true
> path
> "app.jsx"
> this.moduleMap.has(path)
> false

So I smell something related to the jsx loader in some way but can't find what exactly :/

[geelen]

Aha! You're using the floatdrop JSX plugin, which doesn't have livereload support. You want my one: https://github.com/geelen/jspm-loader-jsx

jspm install jsx=npm:jspm-loader-jsx is the command you want to run to switch over.

[johnraz]

ha ! I knew I was missing something :-)

The issue seems to persist though :/

> this.moduleMap.has('app.jsx!npm:jspm-loader-jsx@0.0.1')
> true
> path
> "app.jsx"
> this.moduleMap.has(path)
> false

[johnraz]

Ok I was on jspm@beta, going back to 0.15.7 and related loaders, all is fine now.

[geelen]

Ok cool. I haven't even looked at the beta yet, stable does everything I need for the time being.

[Globegitter]

@geelen I have just been trying that as well and using the latest Systemjs (0.18.8) this does not quite seem to work.

I am getting

Change detected in js/components/OffCanvasMenu/OffCanvasMenu.jsx that cannot be handled gracefully: Change occurred to a file outside SystemJS loading 

Still looking into what exactly is happening but would love to get it working.

Edit: Managed some minor hacks to get it to try and re-import the component. But nothing does actually update.

Looking more into it, the System.delete function does seem to be doing anything.

Edit2: I managed to hotreload something! It is quite a hack with manually System.delete my main file as well as the file that changed and then importing the main file again. Not entirely sure what is going on but maybe something changed within Systemjs?

Edit3: Ok found a slightly better way to inject the react component. Now I am just deleting and importing the file that has changed (_this3.System.import(moduleInfo.moduleName)) and then return _this3.fileChanged('js/app.js'); which is my main file that loads all other files. It does seem like a few things have changed over the last Systemjs versions, especially with keys but it seems also with the depMap.