Skip to content

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

@dbohn

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: commonjs@rollup/plugin-commonjs issueinconsistencyInconsistency between dev & buildp2-edge-caseBug, but has workaround or limited in scope (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions