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

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

cmpluscmplus Posts: 65Questions: 13Answers: 0

[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, $);

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    '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

  • cmpluscmplus Posts: 65Questions: 13Answers: 0

    @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

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

    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

  • cmpluscmplus Posts: 65Questions: 13Answers: 0

    @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

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

    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

  • cmpluscmplus Posts: 65Questions: 13Answers: 0

    @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"
        }
    
  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    Answer ✓

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

    Allan

  • cmpluscmplus Posts: 65Questions: 13Answers: 0

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

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

    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

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin

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

    Allan

Sign In or Register to comment.