Using Pinia from library results in TypeError: can't access property "_s", pinia is undefined
#379
Comments
|
You should add the This lead to the circular object issue which is related to store state hydration. There is some circular references in the Session object. When pre-rendering at server side, the store state is serialized and inlined in the page markup. Later when the page is rendered at client-side, the store is primed with server-initialized state. The issue happens when serializing the state. Anyway, I assume you don't want to initialize the client-side store state with a Session instantiated during SSR, so you can proceed as follows: // https://github.com/renyuneyun/solid-helper-vue/blob/master/src/stores/session.ts
/**
* The Session object. Reactivity is lost. Useful mainly for its functions (e.g. `fetch()`)
*/
session: typeof window !== 'undefined' ? new Session() : undefined, // no Session at server-sideNote that you can also serialize the state manually. First enable the ssr: {
manualStoreSerialization: true
},Then create a Quasar boot file: // src/boot/serialize-state.ts
import { boot } from 'quasar/wrappers'
import { stringify } from 'flatted'; // this package is used to serialize state, it handles circular object,
// You will need to add it to your app dependencies
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async ({ ssrContext }) => {
if(!ssrContext) {
return;
}
ssrContext.onRendered(() => {
// at that time the store state is available in ssrContext.state
// the lines below add a <script> to the pre-rendered markup that injects the serialized state into window.__INITIAL_STATE__
// window.__INITIAL_STATE__ is used at client-side to prime the store
const autoRemove = 'document.currentScript.remove()'
ssrContext._meta.headTags = `<script>window.__INITIAL_STATE__=${stringify(ssrContext.state)};${autoRemove}</script>`+ ssrContext._meta.headTags;
})
})And only use it server-side: // quasar.config.js
boot: [{
client: false,
path: 'serialize-state'
}], |
|
Thanks for the explanation a lot. However, after applying the first patch, another (or a related?) Pinia issue is still there: This can be reproduced regardless of which variant used in the other repo. Presumably this is caused because that separate pinia source results in a separate "instance" of pinia which is not properly initialized? |
|
The For the You should also add Your issue about pinia occurs because the dep is loaded from your library instead of your Quasar app. This is because the dep is resolved locally To use your library correctly for SSR, don't forget to change this line: session: typeof window !== 'undefined' ? new Session() : nullIt should be set to To actually create a new Session instance at client-side, I would recommend you these lines of code: import { onMounted } from 'vue';
import { useSessionStore } from 'solid-helper-vue';
const sessionStore = useSessionStore();
onMounted(() => {
if (sessionStore.session === null) {
sessionStore.$reset() // reset the state only at client-side when the component is mounted to avoid hydration mismatches
}
}) |
(This is a further attempt after #375. The previous issue contains useful background, but may not be directly related to this issue.)
I have managed to successfully build a static site from my project. However, I encounter the error related to pinia when opening it in browser.
I have produced a MRE at https://github.com/renyuneyun/minimal-reproduction/tree/5779796a11a816d5e4958baf4f60b893868c28da/quasar-solid-ssg, with instructions in README.
(There is also the circular object issue. Shall I open a separate GH Issue for that?)
The text was updated successfully, but these errors were encountered: