Error during npm run build

[feelgood-devs]

vite v5.2.9 building for production... ✓ 3 modules transformed. x Build failed in 41ms error during build: Error: [vite]: Rollup failed to resolve import "dataTables.net-responsive" from "/var/www/mge/resources/js/datatables.js".

[MGeurts]

Please post the content of your package.json file.

[feelgood-devs]

Good Morning :-)

First of all thanks for providing your work :-)

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.6.4",
        "bootbox": "^6.0.0",
        "bootstrap": "^5.2.3",
        "bootstrap-icons": "^1.11.3",
        "bootstrap-print-css": "^1.0.1",
        "chart.js": "^4.4.2",
        "datatables.mark.js": "^2.1.0",
        "datatables.net": "^2.0.2",
        "datatables.net-bs5": "^2.0.2",
        "datatables.net-buttons-bs5": "^3.0.1",
        "datatables.net-responsive-bs5": "^3.0.0",
        "datatables.net-select-bs5": "^2.0.0",
        "dayjs": "^1.11.10",
        "jquery": "^3.7.1",
        "jszip": "^3.10.1",
        "laravel-vite-plugin": "^1.0",
        "sass": "^1.56.1",
        "select2": "^4.1.0-rc.0",
        "select2-bootstrap-5-theme": "^1.3.0",
        "toastr": "^2.1.4",
        "vite": "^5.0"
    },
    "dependencies": {
        "datatables.net-responsive": "^3.0.2"
    }
}

[MGeurts]

datatables.net-responsive gehört nicht in dependencies. Du hast nämlich schon die Bootstrap version in devDependencies.

` { "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@popperjs/core": "^2.11.6", "axios": "^1.6.4", "bootbox": "^6.0.0", "bootstrap": "^5.2.3", "bootstrap-icons": "^1.11.3", "bootstrap-print-css": "^1.0.1", "chart.js": "^4.4.2", "datatables.mark.js": "^2.1.0", "datatables.net": "^2.0.2", "datatables.net-bs5": "^2.0.2", "datatables.net-buttons-bs5": "^3.0.1", "datatables.net-responsive-bs5": "^3.0.0", "datatables.net-select-bs5": "^2.0.0", "dayjs": "^1.11.10", "jquery": "^3.7.1", "jszip": "^3.10.1", "laravel-vite-plugin": "^1.0", "sass": "^1.56.1", "select2": "^4.1.0-rc.0", "select2-bootstrap-5-theme": "^1.3.0", "toastr": "^2.1.4", "vite": "^5.0" } }

`

[MGeurts]

Let me know if that solved your problem.

[feelgood-devs]

sadly still the same issue...

> build
> vite build

vite v5.2.9 building for production...
✓ 3 modules transformed.
x Build failed in 32ms
error during build:
Error: [vite]: Rollup failed to resolve import "dataTables.net-responsive" from "/var/www/mge/resources/js/datatables.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:67601:27)
    at onRollupWarning (file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:67629:9)
    at onwarn (file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:67333:13)
    at file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:18351:13
    at Object.logger [as onLog] (file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:19999:9)
    at ModuleLoader.handleInvalidResolvedId (file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:18941:26)
    at file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:18899:26

[feelgood-devs]

npm audit meldet...

# npm audit report

bootbox  *
Severity: moderate
Bootbox.js Cross Site Scripting vulnerability - https://github.com/advisories/GHSA-m4ch-4m5f-2gp6
No fix available
node_modules/bootbox

1 moderate severity vulnerability

Some issues need review, and may require choosing
a different dependency.

[feelgood-devs]

hat zwar nicht direkt was damit zu tun, aber trotzdem interessant

[MGeurts]

Ja, ist mir bekannt. Der Autor von Bootbox ist da anderer Meinung.

https://github.com/bootboxjs/bootbox/issues/661

[MGeurts]

Just a few minutes ago, I installed this application as a new local project. Without any problems.

For clarification, I added an installation section to the Read Me file.

` create a new project folder, cd into the folder

git clone https://github.com/MGeurts/laravel-11-bootstrap-5-datatables.git .

cp .env.example .env

make the needed changes regarding name, url, database connection & mail server

composer install

php artisan key:generate

php artisan storage:link

php artisan migrate:fresh --seed

npm install & npm run build

php artisan serve or npm run dev `

[feelgood-devs]

just trying a fresh new install

[feelgood-devs]

verda,,te axt - schon wieder der selbe mist..

Beim ersten npm install & npm run build kam kein response von der Konsole. Nach Eingabe von Enter kam:

[1] 710412

> build
> vite build

sh: 1: vite: not found

added 73 packages, and audited 74 packages in 2s
....

Beim 2. Versuch:

vite v5.2.9 building for production...
✓ 3 modules transformed.
x Build failed in 38ms
error during build:
Error: [vite]: Rollup failed to resolve import "dataTables.net-responsive" from "/var/www/mge/resources/js/datatables.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:67601:27)
    at onRollupWarning (file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:67629:9)
    at onwarn (file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:67333:13)
    at file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:18351:13
    at Object.logger [as onLog] (file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:19999:9)
    at ModuleLoader.handleInvalidResolvedId (file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:18941:26)
    at file:///var/www/mge/node_modules/rollup/dist/es/shared/node-entry.js:18899:26

up to date, audited 74 packages in 645ms

10 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

Some issues need review, and may require choosing
a different dependency.

[MGeurts]

What node version are you using? node --version v20.12.1

What npm version are you using? npm -v 10.5.0

[feelgood-devs]

node --version v20.12.2

npm -v 10.5.2

[MGeurts]

Latest node.js LTS v10.12.2 uses npm10.5.0 and not 10.5.2. See https://nodejs.org/en/download/

Mayby rollback to npm 10.5.0 ?

[feelgood-devs]

Stiil the same issue after rollback to 10.5.0. Think its enough for today. Thanks for helping and have good night :-)

[MGeurts]

I think maybe, in a fresh project, do this in 2 seperate commands:

npm install npm run build

Is npm run dev working?

[feelgood-devs]

good morning :-) npm run dev:

$ npm run dev

> dev
> vite

  VITE v5.2.9  ready in 165 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v11.4.0  plugin v1.0.2

  ➜  APP_URL: http://xxx.xxxx.de
Error: The following dependencies are imported but could not be resolved:

  dataTables.net-responsive (imported by /var/www/mge/resources/js/datatables.js)
  dataTables.net-buttons/js/buttons.colVis.min.mjs (imported by /var/www/mge/resources/js/datatables.js)
  dataTables.net-buttons/js/buttons.html5.min.mjs (imported by /var/www/mge/resources/js/datatables.js)
  dataTables.net-buttons/js/buttons.print.min.mjs (imported by /var/www/mge/resources/js/datatables.js)
  dataTables.mark.js (imported by /var/www/mge/resources/js/datatables.js)

Are they installed?
    at file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:52585:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///var/www/mge/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:52051:38

files existing:

$ ls /var/www/mge/node_modules/vite/dist/node/chunks/
dep-CrWVpuYf.js  dep-DbzVZKyq.js  dep-DHU7GEFN.js  dep-IQS-Za7F.js  dep-_QLjGPdL.js

[MGeurts]

Your APP_URL in the .env file is incorrect.

Maybe try http://mge.test/

[feelgood-devs]

cant do that, its on hetzner cloud

[feelgood-devs]

i can give you the real app url, but wont post it here

[MGeurts]

Are you developing online, not locally?

I, as so many others, develop locally. npm run build then puts the compiled javasript libraries in \public\build\ wich become available online during cloning (or updating) the project online.

So I do not have to compile online, only locally.

[feelgood-devs]

tbh yes i do. I have also set up some dev environents on different computers ending up testing multiple projects directly online to find out whats closest to my needs before i dive deeper. Im quite new to laravel, node.js and try also to get some insight how things work. I have used only PHP, JavaScript/jquery with CodeIgniter before.

Which dev environment do you prefer. Im working on Liunx and my Teammate on Windows. My last was 2 Bitnami/Laravel Docker Packages. Also Sail or Vagrant seem to be common. Homestead is supported by Windows and Linux and mabye thats the way i should go

[MGeurts]

I have to work on Windows due to my customers working in Windows environments. My Home lab components are Linux based. I develop locally and only use LARAGON. See https://www.kreaweb.be/category/blog/development/.

[Raza9798]

It works when installing node module npm install npm run build npm run dev

Node Version v21.6.0 Npm Version 10.2.4

[MGeurts]

I'm closing this issue. Please open a new issue if there should still be a problem.