Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4 #569

mrauhu · 2020-06-05T05:59:06Z

Greetings, @pimlie

This pull-request fixes the 500 error with document is not defined message when we using Vue Meta and Vue+Meteor SSR.

Problem is the Vue+Meteor SSR package doesn't have this.$el on hook:beforeMount, so the getTag() function is called in { ssr: true } context.

Bug was introduced in #563.

Best wishes,
Sergey.

…g `vue-meta` with Vue Meteor SSR

codecov · 2020-06-05T06:02:09Z

Codecov Report

Merging #569 into master will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #569   +/-   ##
=======================================
  Coverage   98.68%   98.68%           
=======================================
  Files          33       33           
  Lines         684      684           
  Branches      211      211           
=======================================
  Hits          675      675           
  Misses          5        5           
  Partials        4        4

Impacted Files	Coverage Δ
src/shared/mixin.js	`91.56% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 92350d5...5b0c2ad. Read the comment docs.

pimlie · 2020-06-07T11:51:28Z

@mrauhu Hey, thanks for this PR. Could you please create a reproduction of the issue you are experiencing?

After reading your explanation it doesnt become immediately clear unfortunately what you are trying to solve. You mention this.$el but that is used before your proposed change. Furthermore you are checking document but that should always be available afaik as the beforeMount lifecycle hook should only run on the client.

Thanks!

mrauhu · 2020-06-07T14:28:47Z

@pimlie I'm created the repository with code and instructions for reproduction of the bug:
https://github.com/mrauhu/meteor-ssr-vue-meta

Thank you for participating.

pimlie · 2020-06-07T14:52:26Z

@mrauhu Thanks for the repro. I have little xp with Meteor but why does the beforeMount / mounted Vue lifecycle hook run at all when there is no global document available?

The Vue SSR docs state that these methods dont run during SSR, so why do they run for Meteor?

mrauhu · 2020-06-07T22:54:57Z

I'm updated the repository, and added logs for Vue lifecycle hooks:

First run

On a server reload after change any *.js or *.vue file.

Server

[SSR] /
server beforeCreate()
server created()
server beforeMount()
(STDERR) [Vue warn]: Error in event handler for "hook:beforeMount": "ReferenceError: document is not defined"
(STDERR)
(STDERR) (found in <Root>)
(STDERR) ReferenceError: document is not defined
(STDERR)     at getTag (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue-meta\dist\vue-meta.common.js:403:17)
(STDERR)     at Vue.<anonymous> (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue-meta\dist\vue-meta.common.js:525:27)

Log with timestamps and full stack trace

I20200608-01:32:57.821(3)? [SSR] /
I20200608-01:32:57.827(3)? server beforeCreate()
I20200608-01:32:57.828(3)? server created()
I20200608-01:32:57.829(3)? server beforeMount()
W20200608-01:32:57.830(3)? (STDERR) [Vue warn]: Error in event handler for "hook:beforeMount": "ReferenceError: document is not defined"
W20200608-01:32:57.830(3)? (STDERR)
W20200608-01:32:57.831(3)? (STDERR) (found in <Root>)
W20200608-01:32:57.847(3)? (STDERR) ReferenceError: document is not defined
W20200608-01:32:57.848(3)? (STDERR)     at getTag (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue-meta\dist\vue-meta.common.js:403:17)
W20200608-01:32:57.849(3)? (STDERR)     at Vue.<anonymous> (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue-meta\dist\vue-meta.common.js:525:27)
W20200608-01:32:57.850(3)? (STDERR)     at Vue.on (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:3813:10)
W20200608-01:32:57.851(3)? (STDERR)     at invokeWithErrorHandling (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:1850:26)
W20200608-01:32:57.852(3)? (STDERR)     at Vue.$emit (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:3876:9)
W20200608-01:32:57.854(3)? (STDERR)     at callHook (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:4211:8)
W20200608-01:32:57.855(3)? (STDERR)     at mountComponent (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:4031:3)
W20200608-01:32:57.856(3)? (STDERR)     at Vue.$mount (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
W20200608-01:32:57.857(3)? (STDERR)     at Vue._init (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:4999:10)
W20200608-01:32:57.862(3)? (STDERR)     at new Vue (C:\Work\nuxt\meteor-ssr-vue-meta\node_modules\vue\dist\vue.runtime.common.dev.js:5065:8)
W20200608-01:32:57.863(3)? (STDERR)     at createApp (imports/ui/createApp.js:56:15)
W20200608-01:32:57.864(3)? (STDERR)     at imports/startup/server/vue-ssr.js:17:38
W20200608-01:32:57.865(3)? (STDERR)     at new Promise (<anonymous>)
W20200608-01:32:57.865(3)? (STDERR)     at Object.VueSSR.createApp (imports/startup/server/vue-ssr.js:15:12)
W20200608-01:32:57.866(3)? (STDERR)     at packages/akryum:vue-ssr/server/index.js:97:31
W20200608-01:32:57.867(3)? (STDERR)     at Meteor.EnvironmentVariable.EVp.withValue (packages\meteor.js:1234:12)
W20200608-01:32:57.867(3)? (STDERR)     at packages/akryum:vue-ssr/server/index.js:87:23
W20200608-01:32:57.870(3)? (STDERR)     at Meteor.EnvironmentVariable.EVp.withValue (packages\meteor.js:1234:12)
W20200608-01:32:57.870(3)? (STDERR)     at packages/akryum:vue-ssr/server/index.js:82:24
W20200608-01:32:57.872(3)? (STDERR)     at new Promise (<anonymous>)
W20200608-01:32:57.872(3)? (STDERR)     at packages/akryum:vue-ssr/server/index.js:74:20
W20200608-01:32:57.873(3)? (STDERR)     at packages/server-render/server-register.js:14:19

Client

client beforeCreate()
client created()
client beforeMount()
client mounted()
debug/init - vue-meta version ^2.3.4

Next runs

On page reload.

Server

[SSR] /
server beforeCreate()
server created()
server beforeMount()
server mounted()
server serverPrefetch()
debug/init - vue-meta version ^2.3.4
[SSR] Data prefetch: 9ms

Log with timestamps and full stack trace

I20200608-01:33:03.917(3)? [SSR] /
I20200608-01:33:03.919(3)? server beforeCreate()
I20200608-01:33:03.923(3)? server created()
I20200608-01:33:03.923(3)? server beforeMount()
I20200608-01:33:03.924(3)? server mounted()
I20200608-01:33:03.925(3)? server serverPrefetch()
I20200608-01:33:03.926(3)? debug/init - vue-meta version ^2.3.4
I20200608-01:33:03.926(3)? [SSR] Data prefetch: 9ms

Client

client beforeCreate()
client created()
client beforeMount()
client mounted()

@pimlie my suggestion is instead of debugging the Vue+Meteor platform add one check for the document:

vue-meta/src/shared/mixin.js

Line 43 in 5b0c2ad

if (typeof document !== 'undefined' &&

pimlie · 2020-06-10T10:00:40Z

@atinux @manniL What do you think, should we merge this? Its not a big fix, but still it seems wrong to fix something that shouldn't happen in the first place. The Vue SSR docs clearly state the mounted hooks shouldnt run, but for some reason they do with Meteor.

Im slightly leaning to not merging until we know why Meteor behaves differently then the Vue SSR docs specify as it could just be an upstream bug in Meteor

atinux · 2020-06-10T13:56:51Z

Agree @pimlie

chris-visser · 2020-06-12T12:22:36Z

You sure you want to merge? I can take a look at the Meteor Vue package and see if I can fix it there. If this makes it into nuxt it might lead to other people with problems.

pimlie · 2020-06-12T12:26:32Z

@chris-visser If you could have a look that would be awesome!

I have zero to none xp with meteor, so maybe it is correct that mounted hooks runs on ssr and we should just merge this. But if not then either there is a bug in vue-meteor or a bug/config issue in the reproduction. I did check the vue-meteor-ssr example (which it seems the repro is based on) and I didnt notice anything wrong.

chris-visser · 2020-06-12T13:35:05Z

If its a Meteor Vue SSR bug, its fixable via Meteor Vue and it will be there within a very short time. I would not recommend merging this

mrauhu · 2020-06-12T13:48:13Z

@chris-visser thank you for debugging.

chris-visser · 2020-06-13T18:05:32Z

I have been diving trough the Vue code, but there seems to be nothing that prevents the beforeMount hook from triggering on the server:

https://github.com/vuejs/vue/blob/dev/src/core/instance/lifecycle.js#L141

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

If this is true, then maybe it is valid to accept this PR and that would fix it for Meteor too. However, maybe its just better to check if this.$el is defined?

mrauhu · 2020-06-13T18:14:57Z

However, maybe its just better to check if this.$el is defined?

@chris-visser there is already check for this.$el:

vue-meta/src/shared/mixin.js

Line 39 in 14eb4af

    
           wasServerRendered = this.$el && this.$el.nodeType === 1 && this.$el.hasAttribute('data-server-rendered')

And this check do nothing with an undefined document.

chris-visser · 2020-06-13T18:47:34Z

What I mean is that the Vue instance does this:

  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)

The inBrowser var in Vue is just typeof window === undefined. When I check this in Meteor on the Server (just to be sure) its indeed undefined. This means that el is also undefined, which is the value for this.$el in this mixin. So based on that, I would guess that the check in this hook is wrong:

The below code would return a falsey value, because this.$el is on the server always undefined. That means that wasServerRendered is incorrect, because on the server this value is never true.

wasServerRendered = this.$el && this.$el.nodeType === 1 && this.$el.hasAttribute('data-server-rendered')

Any check for the opposite would of course result in exactly the opposite - which is the bug that you now have:

!wasServerRendered && $root[rootConfigKey] && $root[rootConfigKey].appId === 1

This one results in true on the server: !wasServerRendered

stale · 2020-07-04T20:44:56Z

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

Verify that you can still reproduce the issue in the latest version of vue-meta
Comment the steps to reproduce it
Issues that are labeled as pending will not be automatically marked as stale.

mrauhu · 2020-07-11T21:28:26Z

@pimlie, @atinux please, open this pull request.

Unfortunately, the vue-meta from version 2.3.4 and up is broken for using with Vue+Meteor integration.

pimlie · 2020-07-12T10:57:55Z

@chris-visser Thanks for your time looking into this!

And sorry for the late response, but its still unclear why the beforeMount hook is even run on the server.

@mrauhu I am very sorry but I dont want to merge a fix in, however simple it is, just because we didnt uncover the real cause of the issue. Again, this section: https://ssr.vuejs.org/guide/universal.html#component-lifecycle-hooks of the Vue SSR docs clearly state that beforeMount should only run on the client and isnt executed on the server.

So I dont know whats going wrong here but it seems there is either a bug in vue, vue-server-renderer or vue-meteor? Although if this was a general vue or vue-server-renderer issue then I would have expected that we had also seen this issue with Nuxt.js, but as we haven't my guess is still that this is a vue-meteor issue.

These beforeMount hooks and the var wasServerRendered dont matter at all on the server and just shouldn't be touched. This code only exists to work-around a hydration issue on the client.

The only recommenddation I can give you is to try if you can narrow it down by trying the following things:

Add a SFC with a beforeMount hook, see if this is executed on the server:

export default {
  beforeMount() {
    console.log('SFC beforeMount')
  }

Create a mixin with a beforeMount hook as previously

export default {
  mixins: [myMixinWithBeforeMountHook]

Add a SFC with a beforeCreate hook in which you call

export default {
  beforeCreate() {
    this.$once('hook:beforeMount', () => console.log('SFC beforeCreate listen'))

Create a mixin with a beforeCreate hook as previously

export default {
  mixins: [myMixinWithBeforeCreateHookThatListensToBeforeMount]

If any of these are logging something on the server then it would be an indication of a vue-meteor issue.

mrauhu · 2020-07-13T16:16:23Z

@pimlie thank you for the recommendation.

Fixes the 500 error with document is not defined message, when usin…

5b0c2ad

…g `vue-meta` with Vue Meteor SSR

mrauhu changed the title ~~Fix: 500 error using Vue Meteor SSR after update vue-meta version to 2.3.4~~ Fix: 500 error using Vue+Meteor SSR after update vue-meta version to 2.3.4 Jun 5, 2020

pimlie requested review from atinux and TheAlexLichter June 10, 2020 09:57

atinux approved these changes Jun 10, 2020

View reviewed changes

stale bot added the stale label Jul 4, 2020

stale bot closed this Jul 11, 2020

mrauhu mentioned this pull request Jul 18, 2020

Vue+Meteor SSR calling the client-side component lifecycle hooks beforeMount() and mounted() on the server-side meteor-vue/vue-meteor#409

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4 #569

Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4 #569

mrauhu commented Jun 5, 2020 •

edited

Loading

codecov bot commented Jun 5, 2020 •

edited

Loading

pimlie commented Jun 7, 2020

mrauhu commented Jun 7, 2020 •

edited

Loading

pimlie commented Jun 7, 2020

mrauhu commented Jun 7, 2020 •

edited

Loading

pimlie commented Jun 10, 2020 •

edited

Loading

atinux commented Jun 10, 2020

chris-visser commented Jun 12, 2020

pimlie commented Jun 12, 2020

chris-visser commented Jun 12, 2020

mrauhu commented Jun 12, 2020

chris-visser commented Jun 13, 2020

mrauhu commented Jun 13, 2020

chris-visser commented Jun 13, 2020 •

edited

Loading

stale bot commented Jul 4, 2020

mrauhu commented Jul 11, 2020 •

edited

Loading

pimlie commented Jul 12, 2020

mrauhu commented Jul 13, 2020

Fix: 500 error using Vue+Meteor SSR after update vue-meta version to 2.3.4 #569

Fix: 500 error using Vue+Meteor SSR after update vue-meta version to 2.3.4 #569

Conversation

mrauhu commented Jun 5, 2020 • edited Loading

codecov bot commented Jun 5, 2020 • edited Loading

Codecov Report

pimlie commented Jun 7, 2020

mrauhu commented Jun 7, 2020 • edited Loading

pimlie commented Jun 7, 2020

mrauhu commented Jun 7, 2020 • edited Loading

First run

Server

Client

Next runs

Server

Client

pimlie commented Jun 10, 2020 • edited Loading

atinux commented Jun 10, 2020

chris-visser commented Jun 12, 2020

pimlie commented Jun 12, 2020

chris-visser commented Jun 12, 2020

mrauhu commented Jun 12, 2020

chris-visser commented Jun 13, 2020

mrauhu commented Jun 13, 2020

chris-visser commented Jun 13, 2020 • edited Loading

stale bot commented Jul 4, 2020

mrauhu commented Jul 11, 2020 • edited Loading

pimlie commented Jul 12, 2020

mrauhu commented Jul 13, 2020

Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4 #569

Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4 #569

mrauhu commented Jun 5, 2020 •

edited

Loading

codecov bot commented Jun 5, 2020 •

edited

Loading

mrauhu commented Jun 7, 2020 •

edited

Loading

mrauhu commented Jun 7, 2020 •

edited

Loading

pimlie commented Jun 10, 2020 •

edited

Loading

chris-visser commented Jun 13, 2020 •

edited

Loading

mrauhu commented Jul 11, 2020 •

edited

Loading