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

DoneJS
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:

https://github.com/leoj3n/bitcentivez/issues/1

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.

1 Like
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:

https://github.com/leoj3n/bitcentivez/issues/1#issuecomment-424877544

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:

https://github.com/canjs/can-view-live/pull/125

11

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