Vue 3 & Vite: Web Page Crashes After Importing Editor

wssteel

I'm working with a Vue 3 project in a Vite environment and have implemented a trial version of an editor.
When I use npm run dev, the webpage runs smoothly and the editor functions as expected.
However, after executing npm run build and then running npm run preview, the webpage doesn't display and web page crashed . No error messages are shown.

I've tried commenting out the Edit import and using only DataTables, and everything works as expected.
However, when I import Edit and then run npm run build followed by npm run preview, the webpage fails to operate.
What could be causing this issue?

package.json

"dependencies": {
    "@datatables.net/editor-2023-11-04-dt": "^2.2.2",
    "datatables.net-buttons-dt": "^2.4.2",
    "datatables.net-datetime": "^1.5.0",
    "datatables.net-dt": "^1.13.6",
    "datatables.net-scroller-dt": "^2.2.0",
    "datatables.net-select-dt": "^1.7.0",
    "datatables.net-vue3": "^2.1.3",
  }

.vue file

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Editor from '@datatables.net/editor-2023-11-04-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-scroller-dt';
import 'datatables.net-select-dt';
import 'datatables.net-datetime';

DataTable.use(DataTablesCore);

allan

No errors in either the console where Vite is being run (either at build time or in the preview run), nor in the browser's console?

I'm struggling to think of why it would work in dev, but not in production, and no errors I'm afraid!

Allan

wssteel

Hi Allan,
here is my git repository and video
https://github.com/GaGaWoo/DataTables-Editor-Test.git
https://youtube.com/watch?v=vndZPjGUZ3k

The issue is not that the browser shows no errors, but rather there might be a loop issue that causes the webpage to crash. This results in the webpage being stuck in a perpetual loading state, preventing any error messages from being displayed.

Please check my code.
Thanks!