[Solved] TypeError: Cannot read property 'contains' of null


#1

I’m having some trouble with SSR in an application I’m trying to use it in.

The error I’m seeing is TypeError: Cannot read property 'contains' of null.

It’s like SSR is trying to manipulate a DOM that is not there. I’m using done-ssr-middleware on the server and autorender on the client.

Here’s my issue documenting the full error as seen both locally and on Heroku:

Please take note of the dependency versions and such for the client app:

And the server app:

Also note these important client app files:

And these server app files:

As mentioned in the issue linked above, npm run develop-static (uses the static middleware) works but npm run develop-ssr (uses the ssr middleware) errors as explained.

Hopefully someone familiar with SSR can clone the repo to help me explain what’s going wrong?

Thanks!


#2

I think @matthewp was just fixing a problem related to contains. He will probably be able to update you tomorrow.


#3

This was fixed in can-view-live yesterday. Update your dependencies and all should be well.


#4

Thanks @matthewp.

I am still getting a 'contains' error but instead of being in lib/core.js it seems to now be in lib/attrs.js.

I’ve updated my GitHub issue with a comment showing the full error:

Is this something you’re actively working on? Anything I should try next?


#5

Did you delete your package-lock?


#6

Hey @justinbmeyer, thanks for replying.

If you look at the repo, there is an .npmrc with package-lock=false anywhere there’s a package.json. So, to answer the question, there are no package-lock.json files.

I even double-checked just now to make 100% sure, and can affirm that there are none in the project.

Also, if you look closer at the GitHub issue comment I linked, you will see I verified the versions of can-view-live are at 4.2.2 (not 4.2.1) even for nested and deduped deps using npm ls can-view-live.


#7

It looks like it’s using el.ownerDocument.documentElement.contains(el). Any idea why documentElement would be null @matthewp ?


#8

@leoj3n can you try changing the following at https://github.com/canjs/can-view-live/blob/master/lib/attrs.js#L102

if (!el.ownerDocument.documentElement.contains(el)) {
			teardownHandler();
		}

to:


			var doc = el.ownerDocument;
			var ownerNode = doc.contains ? doc : doc.documentElement;
 			if (!ownerNode.contains(el)) {
				teardownHandler();
			}

?


#9

documentElement gets removed to trigger memory cleanup after the Zone has completed. My can-view-live release should have gotten this. Was there another one? If so you can do the same sort of thing, use document.contains if it exists.


#10

Woohoo! That works. Thanks again @justinbmeyer and @matthewp.

I’ve opened a PR with this change, hope this helps:


#11

Published fix: https://github.com/canjs/can-view-live/releases/tag/v4.2.3