Inertia: Passing function to transformProps causes error

Created on 27 Oct 2020  路  2Comments  路  Source: inertiajs/inertia

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)

https://github.com/inertiajs/inertia/blob/c7a39e57d26c86a88513fc063f7d4fc74a9eb232/packages/inertia/src/inertia.js#L296

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

All 2 comments

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:

https://github.com/inertiajs/inertia/blob/c7a39e57d26c86a88513fc063f7d4fc74a9eb232/packages/inertia/src/inertia.js#L272

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gajosadrian picture gajosadrian  路  5Comments

bakanyaka picture bakanyaka  路  5Comments

mpskovvang picture mpskovvang  路  5Comments

sebastiandedeyne picture sebastiandedeyne  路  3Comments

piercemcgeough picture piercemcgeough  路  4Comments