Invalid production build when using inertia.js library in Vite 3.0.3

[dbohn]

Describe the bug

Starting from Vite 3, we are not able to build our Vue 2.7 app, that is using the inertia.js library.

See the reproduction linked below. In the resources/views/pages/welcome.vue-file, you can see a Vue component, that defines a form using the inertia js form helper. When using this form helper, the production build errors out with the error messages, described below. As soon as I limit the dependency for Vite to version 2.9.14, everything compiles just fine in production mode.

Please note, that the reproduction repository strips out the server part, that is usually part of a inertia app to ease reproduction.

If you need any further information on this issue, I'm happy to provide that! I'm not sure, if it is a bug of the inertia library, but as it was fixable by lowering the vite dependency version, I suspect the issue in the behaviour of Vite 3.

Reproduction

https://github.com/dbohn/vite-vue27-inertia-reproduction

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 9.94 GB / 31.08 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 103.0
  npmPackages:
    @vitejs/plugin-vue2: ^1.1.2 => 1.1.2
    vite: ^3.0.3 => 3.0.3

Used Package Manager

npm

Logs

When running in production mode, the following errors are thrown in the browser console when building with Vite 3:

index.51f05dcf.js:5 TypeError: Wu.observable is not a function at x.ug [as form] (index.51f05dcf.js:9:31033) at u.data (welcome.9a8b5c61.js:1:783) at nd (index.51f05dcf.js:5:41811) at rd (index.51f05dcf.js:5:41591) at ed (index.51f05dcf.js:5:41201) at e._init (index.51f05dcf.js:5:43503) at new u (index.51f05dcf.js:5:44774) at kp (index.51f05dcf.js:5:37577) at init (index.51f05dcf.js:5:36422) at h (index.51f05dcf.js:5:53774)

This directly relates to the usage of the form helper method in the mentioned welcome.vue

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

It seems these workaround works.

// using ESM inertiajs
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
	plugins: [
		vue(),
	],
	resolve: {
		alias: {
			'@inertiajs/inertia-vue': '/node_modules/@inertiajs/inertia-vue/src/index.js'
		}
	}
})

// (experimental) using Esbuild Deps Optimization at Build Time
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
	plugins: [
		vue(),
	],
	optimizeDeps: {
		disabled: false
	},
	build: {
		commonjsOptions: {
			include: []
		}
	}
})

[dbohn]

Thank you for the extremely quick triage and response! I picked the first workaround and it works like a charm! I'm excited for the changes of the experimental esbuild dep optimization!

[craigrileyuk]

I've just hit this issue as well.

• [email protected]
• [email protected]
• @inertiajs/[email protected]
• @inertiajs/[email protected]

No issues in development mode, but when building for production, I get t$1.observable is not a function from the useForm function.

Will try the workaround. Thanks for those @sapphi-red

[shileima]

It works, but how to fix the error throughly? @sapphi-red It is a bug of [email protected] ?

[WizardOfCodez]

Also ran in this lately - had a hard time finding this workaround!

[ivalkenburg]

Looks like this is fixed in inertiajs 1.0. At least when using the vue2 adapter. I no longer needed sapphi-red workaround.

[dbohn]

I can confirm, that this is now fixed by Inertia 1.0 and will close the issue for now. Thanks!