search

ara-framework / hypernova-vue

Vue.js bindings for Hypernova.
https://www.npmjs.com/package/hypernova-vue
MIT License
41 stars 8 forks source link

Error during html recovering with store #31

Closed fvandenbulcke closed 4 years ago

fvandenbulcke commented 4 years ago

Hi Felipe!

I fail to run you lib with a store. I've describe tested cases below and push a minimal project here. Can you see what i was missing?

The configuration: hypernova@2.5.0 hypernova-vue@3.0.4 vue-server-renderer@2.6.11

The client.js is defined as described in you doc:

import { renderVuex } from 'hypernova-vue'; import LysModule from '../src/components/LysModule.vue'; import createStore from '../src/store'; export default renderVuex('VUE_MODULE', LysModule, createStore);

In server.js when i use the renderVuex function as follow:

import hypernova from 'hypernova/server';
import { renderVuex } from 'hypernova-vue/server';

hypernova({
  devMode: true,
  getComponent(name) {
    if (name === 'VUE_MODULE') {
      return renderVuex('VUE_MODULE', LysModule, createStore);
    }
    return null;
  },
  ......
});

This error is returned:

"message": "r is not a function",
"stack": [
        "TypeError: r is not a function",
        "at W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:221738",
        "at W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:179:28016",
        "at c (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:1:8009)",
        "at D._settlePromiseFromHandler (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:93248)",
        "at D._settlePromise (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:94048)",
        "at D._settlePromiseCtx (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:94554)",
        "at c (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:97649)",
        "at s (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:97535)",
        "at a._drainQueues (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:98661)",
        "at Immediate.drainQueues (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:97469)",
        "at runCallback (timers.js:705:18)",
        "at tryOnImmediate (timers.js:676:5)",
        "at processImmediate (timers.js:658:5)"
]

In server.js when i keep the renderVue function as follow:

import hypernova from 'hypernova/server';
import { renderVue, Vue } from 'hypernova-vue/server';

hypernova({
  devMode: true,
  getComponent(name) {
    if (name === 'VUE_MODULE') {
      return renderVue('VUE_MODULE', Vue.extend(LysModule));
    }
    return null;
  },
  ......
});

The variable $store seems not to be instancied and this error is returned:

"message": "Cannot read property 'dispatch' of undefined",
"stack": [
        "TypeError: Cannot read property 'dispatch' of undefined",
        "at a.T.forEach.r.(anonymous function) (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:357:9239)",
        "at a.created (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:357:11171)",
        "at Ue (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:96:11291)",
        "at Yt (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:96:25252)",
        "at a.e._init (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:96:32898)",
        "at new a (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:96:30472)",
        "at W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:221523",
        "at W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:179:28016",
        "at c (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:1:8009)",
        "at D._settlePromiseFromHandler (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:93247)",
        "at D._settlePromise (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:94047)",
        "at D._settlePromiseCtx (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:94553)",
        "at c (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:97648)",
        "at s (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:97534)",
        "at a._drainQueues (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:98660)",
        "at Immediate.drainQueues (W:\\github-projects\\hypernova-vue-vuex\\dist\\server.js:352:97468)"
]
marconi1992 commented 4 years ago

Hi @fvandenbulcke, I noticed the createStore is the Vuex store instance itself, it should be a function that returns the instance instead.

from 

const store = new Vuex.Store({...

to

const store = () => new Vuex.Store({...

I need to update the Readme file to avoid mistakes.

fvandenbulcke commented 4 years ago

ok thank you for your help My project is now running and I close this issue