Avoiding the exception 'Uncaught (in promise) TypeError: Cannot read …

[viniciusalvess]

…properties of undefined (reading 'version')' when submitting a form. The currentPage.get() function is returning undefined unpredictably.

The exception below is happening when submitting a simple form.

index.esm-DaZQPhBF.js:4 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'version')
    at Yr.getHeaders (index.esm-DaZQPhBF.js:4:57092)
    at Yr.send (index.esm-DaZQPhBF.js:4:55877)
    at da.send (index.esm-DaZQPhBF.js:4:57294)
    at $o.visit (index.esm-DaZQPhBF.js:4:59501)
    at $o.post (index.esm-DaZQPhBF.js:4:58281)
    at index.esm-DaZQPhBF.js:69:13670

Here is a laracasts post with some more details about the this issue.

https://laracasts.com/discuss/channels/inertia/cannot-read-properties-of-undefined-reading-version

[viniciusalvess]

Adding some more information about this issue:

My form lives on a separate package with the @inertiajs/react package as a peerDependency. And seems like the currentPage object only gets set by the createInertiaApp function by reading the data-page property.
Since I'm using the useForm hook on a separate package, the currentPage object of the package context is always undefined because there is nothing calling createInertiaApp on my separate package to initialize the current page object from the the data-page property.
But when form calls the post method, it goes all the way up to the core "router.visit" which calls the currentPage.get() that return an undefined object, because the useForm is being used withing a separate package context that didn't initialized the page from the data-page attribute.
I wonder if there is anything I can do on my separate package to initialize the currentPage? Or perhaps I'll have to move up to the main application any component that uses inertia, which is not what I wanted to do, but if that is the only way, I'll do it.

[viniciusalvess]

So after not being satisfied with the solution of this pr. I found another solution that I think is the best way to go.
In order to be able to use @inertiajs/react usePage, useForm hooks on another component package, I had to add the settings below to the vite.config.js of the main application, not to the vite.config.js of the package.
The way I found this solution was by having a similar issue with react query and I found the solution in one of their repo's threads.

resolve: {
    preserveSymlinks: true,
    alias: {
      '@VinSystems/ui-views-js': path.resolve(__dirname, '../../library/npm/ui-views-js/src'),
      '@tanstack/react-query': path.resolve(__dirname, './node_modules/@tanstack/react-query'),
      '@inertiajs/react': path.resolve(__dirname, './node_modules/@inertiajs/react')
    }
  },
  rollupOptions: { external: ['react', 'react-dom', 'axios', '@tanstack/react-query', '@inertiajs/react']},

[pascalbaljet]

@viniciusalvess Another option for the aliases is to use the dedupe option:

resolve: {
    dedupe: ['@inertiajs/react']
}