app.js:
// ...
return (
<StyletronProvider value={engine}>
<BaseProvider theme={state.theme}>
<Block {...blockProps}>
<InertiaApp
initialPage={JSON.parse(app.dataset.page)}
resolveComponent={name =>
import(`./Pages/${name}`).then(module => module.default)
}
transformProps={props => ({
...props,
toggleTheme: () => {
// ...
}
})}
/>
</Block>
</BaseProvider>
</StyletronProvider>
);
// ...
Passing function to transformProps causes same error as here #278:
Uncaught (in promise) DOMException: Failed to execute 'replaceState' on 'History': function toggleTheme() {// ...
} could not be cloned.
at Object.replaceState (webpack-internal:///./node_modules/@inertiajs/inertia/dist/index.js:1:9008)
at eval (webpack-internal:///./node_modules/@inertiajs/inertia/dist/index.js:1:8704)
An empty function also throws this error.
I am using IIS with yarn hot.
The strange thing is that passing function to transformProps worked for me before I updated Inertia packages. I don't remember what version I had before
So someone else ran into this recently, see here: #278
I'm pretty sure this is a bug, as the transformed props are never supposed to end up in history state. However, I think I can see the issue already here:
Since we're not deep cloning the page object, this line transforms the props of the page object in local memory. Then, whenever Inertia updates the history state (ie. if you scroll), it then tries to put the transformed version into history state, and you get this error.
I need to do some testing to verify this, but if that's the case, this should be solvable. 馃憤
@reinink Thanks