marko
marko copied to clipboard
Server-side Rendering throws error when using setState within onInput
Bug Report
Marko Version: 4.5.6
Details
Currently our project is using server-side rendering to build the initial marko components. While developing, our team came across an issue when using setState
within the onInput
method. On the server-side we get an error TypeError: this.setState is not a function
, though browser works fine. My manager and I started talking and looking into the difference between the Component.js and ServerComponent.js. Seems any state change method is not implemented for the ServerComponent.js. A simple code example:
component.js
export default class CounterComp {
onCreate(input) {
this.state = {
counter: input.counter | 0
};
}
onInput(input) {
this.setState("counter", input.count +1)
}
}
On server-side render this causes the error.
Expected Behavior
this.setState
should not throw error when doing server rendering
Actual Behavior
this.setState
throws error
Possible Fix
Implement state changing methods on ServerComponent.js (setSate
, replaceState
)
Additional Info
Your Environment
- Environment name and version (e.g. Chrome 39, node.js 5.4): **Chrome 64, nodejs 8.6.0
- Operating System and version (desktop or mobile): **Mac OS 10.13.3 Desktop
Stack Trace
TypeError: this.setState is not a function at Modal.onInput (webpack-internal:///54:37:22) at Modal.ServerComponent (webpack-internal:///47:20:37) at ServerComponent (webpack-internal:///46:11:5) at Object.createComponent [as ___createComponent] (webpack-internal:///46:24:21) at renderer (webpack-internal:///44:106:34) at wrappedRenderer (webpack-internal:///52:106:13) at render (webpack-internal:///51:21:3) at renderer (webpack-internal:///44:186:9) at safeRender (webpack-internal:///38:6:9) at Template.render (webpack-internal:///38:136:20)
+1 Marko 4.16.5