Vue version
3.2.44
Link to minimal reproduction
https://stackblitz.com/edit/github-iqylbs?file=src/pages/BreaksSSR.vue
Steps to reproduce
- Open StackBlitz example
- Navigate to page "Breaks SSR", see it working in CSR
- Reload page to force render in SSR
Property "row" was accessed during render but is not defined on instance
What is expected?
SSR should behave as CSR
What is actually happening?
SSR causes app crash
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
vue: ^3.2.25 => 3.2.44Any additional comments?
This is a weird one, it is probably easier to understand looking at the reproduction example.
When defining slot content / templates in a v-for loop, the current loop element is undefined in that slot. However, this only occurs in very specific cases:
- Page is rendered in SSR
- Slot Templates are defined in v-for
- Content referencing the loop element is using an external component that is also using slots
It works perfectly fine on client side or if the component used to render the content is internal (part of the same project, not pre-built from a library).
Additional context
We came across this issue when starting to extract a component library from our project prototype.
We have a dynamic table / listing component used to render a list of objects based on a column configuration. This component also provides dynamic scoped slots for every column in case we want to customize the rendering.
Under the hood, it uses our basic table components to render table rows and cells. After we moved those table components to our new component library, the dynamic listing suddenly broke in SSR.
However, I made the reproduction example as simple as I could and used a random UI library instead of our own code to make sure the same error happens.
Vue version
3.2.44
Link to minimal reproduction
https://stackblitz.com/edit/github-iqylbs?file=src/pages/BreaksSSR.vue
Steps to reproduce
Property "row" was accessed during render but is not defined on instanceWhat is expected?
SSR should behave as CSR
What is actually happening?
SSR causes app crash
System Info
System: OS: Linux 5.0 undefined CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 0 Bytes / 0 Bytes Shell: 1.0 - /bin/jsh Binaries: Node: 16.14.2 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 7.17.0 - /usr/local/bin/npm npmPackages: vue: ^3.2.25 => 3.2.44Any additional comments?
This is a weird one, it is probably easier to understand looking at the reproduction example.
When defining slot content / templates in a v-for loop, the current loop element is undefined in that slot. However, this only occurs in very specific cases:
It works perfectly fine on client side or if the component used to render the content is internal (part of the same project, not pre-built from a library).
Additional context
We came across this issue when starting to extract a component library from our project prototype.
We have a dynamic table / listing component used to render a list of objects based on a column configuration. This component also provides dynamic scoped slots for every column in case we want to customize the rendering.
Under the hood, it uses our basic table components to render table rows and cells. After we moved those table components to our new component library, the dynamic listing suddenly broke in SSR.
However, I made the reproduction example as simple as I could and used a random UI library instead of our own code to make sure the same error happens.