Error: [vite]: Rollup failed to resolve import "datatables.net/js/jquery.dataTables"

cmplus

[vite]: Rollup failed to resolve import "datatables.net/js/jquery.dataTables" :

good morning, I use laravel 10 with datatables, my app.js is this, everything was working now but when I execute the npm run build command I receive this error message and the tables present in laravel disappear, what should I do to solve it?

app.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
import 'laravel-datatables-vite';

import jQuery from 'jquery';
window.$ = jQuery;

import moment from "moment";
window.moment = moment();

import Editor from '@datatables.net/editor-dt';
import 'datatables.net-editor-bs5/js/editor.bootstrap5';
import 'datatables.net-bs5/js/dataTables.bootstrap5';
import 'datatables.net-select-bs5/js/select.bootstrap5';
import 'datatables.net-searchpanes/js/dataTables.searchPanes';
import 'datatables.net-searchpanes-bs5/js/searchPanes.bootstrap5';
import 'datatables.net-responsive-bs5/js/responsive.bootstrap5';
import 'datatables.net-buttons-bs5/js/buttons.bootstrap5';
import 'jquery/dist/jquery';
import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-select/js/dataTables.select';
import 'datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js';
import 'bootstrap/dist/js/bootstrap.bundle';
Editor(window, $);

allan

'datatables.net/js/jquery.dataTables'

doesn't exist. Not as of v2 anyway - it was updated to be just dataTables.js. Why are you importing the file names rather than just using the module and allowing it to auto resolve?

import DataTable from 'datatables.net-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-rowgroup-bs5';

Allan

cmplus

@allan thanks for the reply, when I delete that line from the app.js file the table disappears, I have no idea how that line ended up there, and I don't understand why if I delete it the tables stop working

allan

Without being able to see it, I don't know, but you could try changing it to datatables.net/js/dataTables (assuming you have v2 of DataTables installed, which I guess you do based on the error). You might want to check that all your DataTables dependencies are up to date to the latest versions.

Allan

cmplus

@allan I don't understand what I have done, but nothing works anymore if I take the one from the App.Js file

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
import 'laravel-datatables-vite';

import jQuery from 'jquery';
window.$ = jQuery;

import moment from "moment";
window.moment = moment();

import Editor from '@datatables.net/editor-dt';
import 'datatables.net-editor-bs5/js/editor.bootstrap5';
import 'datatables.net-bs5/js/dataTables.bootstrap5';
import 'datatables.net-select-bs5/js/select.bootstrap5';
import 'datatables.net-searchpanes/js/dataTables.searchPanes';
import 'datatables.net-searchpanes-bs5/js/searchPanes.bootstrap5';
import 'datatables.net-responsive-bs5/js/responsive.bootstrap5';
import 'datatables.net-buttons-bs5/js/buttons.bootstrap5';
import 'jquery/dist/jquery';
import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-select/js/dataTables.select';
import 'datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js';
import 'bootstrap/dist/js/bootstrap.bundle';
Editor(window, $);

So it works, if I change the tables no longer work

allan

if I take the one from the App.Js file

Take one what?

So it works, if I change the tables no longer work

In what way are you changing the tables?

Allan

cmplus

@allan
I go here to the download page and take the npm code and run it, then I insert the code that is generated on the download page into the app.js file and the tables no longer load, I only see the header

npm install --save jquery
npm install --save jszip
npm install --save pdfmake
npm install --save datatables.net-bs5
npm install --save @datatables.net/editor-bs5
npm install --save datatables.net-autofill-bs5
npm install --save datatables.net-buttons-bs5
npm install --save datatables.net-colreorder-bs5
npm install --save datatables.net-datetime
npm install --save datatables.net-fixedcolumns-bs5
npm install --save datatables.net-fixedheader-bs5
npm install --save datatables.net-keytable-bs5
npm install --save datatables.net-responsive-bs5
npm install --save datatables.net-rowgroup-bs5
npm install --save datatables.net-rowreorder-bs5
npm install --save datatables.net-scroller-bs5
npm install --save datatables.net-searchbuilder-bs5
npm install --save datatables.net-searchpanes-bs5
npm install --save datatables.net-select-bs5
npm install --save datatables.net-staterestore-bs5

app.js

import jQuery from "jquery";
import jszip from 'jszip';
import pdfmake from 'pdfmake';
import DataTable from 'datatables.net-bs5';
import Editor from '@datatables.net/editor-bs5';
import 'datatables.net-autofill-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-colreorder-bs5';
import DateTime from 'datatables.net-datetime';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-fixedheader-bs5';
import 'datatables.net-keytable-bs5';
import 'datatables.net-responsive-bs5';
import 'datatables.net-rowgroup-bs5';
import 'datatables.net-rowreorder-bs5';
import 'datatables.net-scroller-bs5';
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-searchpanes-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-staterestore-bs5';

package.json

 "postinstall": "node node_modules/datatables.net-editor/install.js ./Editor.zip"

    "dependencies": {
        "@datatables.net/editor-bs5": "^2.3.2",
        "@datatables.net/editor-dt": "^2.2.2",
        "@fullcalendar/bootstrap5": "^6.1.10",
        "@fullcalendar/core": "^6.1.15",
        "@fullcalendar/daygrid": "^6.1.15",
        "@fullcalendar/list": "^6.1.15",
        "@fullcalendar/timegrid": "^6.1.15",
        "@highcharts/dashboards": "^1.0.2",
        "bootstrap-icons": "^1.11.3",
        "bootstrap-table": "^1.22.1",
        "chart.js": "^4.3.3",
        "datatables.net-autofill-bs5": "^2.7.0",
        "datatables.net-bs5": "^1.13.11",
        "datatables.net-buttons-bs5": "^2.4.3",
        "datatables.net-colreorder-bs5": "^1.7.2",
        "datatables.net-datetime": "^1.5.4",
        "datatables.net-dt": "^2.1.5",
        "datatables.net-editor": "^2.2.2",
        "datatables.net-editor-bs5": "^2.2.0",
        "datatables.net-fixedcolumns-bs5": "^4.3.1",
        "datatables.net-fixedheader-bs5": "^3.4.1",
        "datatables.net-keytable-bs5": "^2.12.1",
        "datatables.net-responsive": "^2.5.0",
        "datatables.net-responsive-bs5": "^2.5.1",
        "datatables.net-rowgroup-bs5": "^1.5.0",
        "datatables.net-rowreorder-bs5": "^1.5.0",
        "datatables.net-scroller-bs5": "^2.4.3",
        "datatables.net-searchbuilder-bs5": "^1.8.1",
        "datatables.net-searchpanes-bs5": "^2.3.3",
        "datatables.net-select-bs5": "^1.7.1",
        "datatables.net-staterestore-bs5": "^1.4.1",
        "fullcalendar": "^6.1.10",
        "highcharts": "^11.1.0",
        "jquery": "^3.7.1",
        "jszip": "^3.10.1",
        "moment": "^2.30.1",
        "pdfmake": "^0.2.15"
    }

allan

What does the browser's console show? I presume there is an error message?

Allan

cmplus

@allan I can't run the npm run build command and so I get tons of 404 not found errors

allan

What do you mean you can't run it? As it in gets an error, or you can't type in your terminal, don't have a terminal, don't have npm or something else?

Allan

allan

Looks like you've posted more information here. Let's carry on the conversation there rather than in two places.

Allan