protonemedia/inertiajs-tables-laravel-query-builder

[2.x] Production build not working in Vite projects

pascalbaljet opened this issue · 7 comments

When using the library in a Laravel project that uses Vite, you'll find this error in the browser console: currentRenderingInstance is null. The test suite, a regular Laravel app with Laravel Mix, uses Webpack and works fine.

From searching the web, it seems the library is using the wrong Vue instance (at least not the one from the app). On the other hand, it looks like the Vite config is set up correctly.

From inspecting the build manually, I can see Vue is not included in the library, which is good.

Any help would be appreciated!

There is a workaround! Add this to your Vite config:

resolve:{
alias: {
"vue": path.resolve("./node_modules/vue")
}
},

It increases the size of the app.js build but decreases the size of the inertia-tables-etc.js build, so it seems to be moving stuff around.

% npm run build

> build
> vite build

vite v2.9.13 building for production...
✓ 395 modules transformed.
public/build/manifest.json                                                  1.27 KiB
public/build/assets/CustomTable.4c10cd7f.js                                 0.50 KiB / gzip: 0.34 KiB
public/build/assets/TwoTables.0d923f56.js                                   0.52 KiB / gzip: 0.31 KiB
public/build/assets/Users.31bc86fb.js                                       0.42 KiB / gzip: 0.32 KiB
public/build/assets/app.15ef2060.css                                        22.71 KiB / gzip: 4.78 KiB
public/build/assets/inertiajs-tables-laravel-query-builder.es.bfea688d.js   125.59 KiB / gzip: 43.15 KiB
public/build/assets/app.797b0635.js                                         184.36 KiB / gzip: 66.05 KiB

% npm run build

> build
> vite build

vite v2.9.13 building for production...
✓ 400 modules transformed.
public/build/manifest.json                                                  1.27 KiB
public/build/assets/CustomTable.65cbee34.js                                 0.50 KiB / gzip: 0.34 KiB
public/build/assets/TwoTables.5e1487f0.js                                   0.52 KiB / gzip: 0.31 KiB
public/build/assets/Users.7ed78ef6.js                                       0.42 KiB / gzip: 0.32 KiB
public/build/assets/app.15ef2060.css                                        22.71 KiB / gzip: 4.78 KiB
public/build/assets/inertiajs-tables-laravel-query-builder.es.db97e4c2.js   97.90 KiB / gzip: 32.35 KiB
public/build/assets/app.eeb46a26.js                                         248.28 KiB / gzip: 91.79 KiB
Priet commented

I don't know if it's related, but I had to add :inertia=$inertia to the Table tag:

<Table :resource="users" :inertia="$inertia">

I'm using Vite.

dear @pascalbaljet can you try with vite vertion 3 ?
because I'm not having this issue with vite version 3

I can confirm that with vite 3 I don't have this issue

I tagged a new npm package (v2.1) which works correctly with Vite 3. The demo has also been updated to Vite 3.

Hello @pascalbaljet, Projects with Laravel mix won't work anymore after the latest version released?

Hello,
I am using Datatables from protonmedia with Laravel Inertia Vite compiler, but I am also having an error stated "Cannot resolve file 'inertiajs-tables-laravel-query-builder'. I was not able to find any solution on the internet, please help me to solve my issue. Thank you!