Laravel | npm error | [webpack-cli] RangeError: Invalid string length
Here is my package.json
{
"private": true,
"version": "8.2.5",
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^41.2.0",
"@ckeditor/ckeditor5-build-balloon": "^41.2.0",
"@ckeditor/ckeditor5-build-balloon-block": "^41.2.0",
"@ckeditor/ckeditor5-build-classic": "^41.2.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^41.2.0",
"@ckeditor/ckeditor5-build-inline": "^41.2.0",
"@eonasdan/tempus-dominus": "^6.9.6",
"@fortawesome/fontawesome-free": "^6.5.2",
"@popperjs/core": "^2.11.8",
"@shopify/draggable": "^1.1.3",
"@yaireo/tagify": "^4.22.2",
"acorn": "^8.11.3",
"apexcharts": "^3.47.0",
"autosize": "^6.0.1",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"bootstrap-cookie-alert": "^1.2.2",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-icons": "^1.11.3",
"bootstrap-maxlength": "^1.10.1",
"bootstrap-multiselectsplitter": "^1.0.4",
"chalk": "^5.3.0",
"chart.js": "^4.4.2",
"clipboard": "^2.0.11",
"countup.js": "^2.8.0",
"cropperjs": "^1.6.1",
"datatables.net": "^2.0.3",
"datatables.net-bs5": "^2.0.3",
"datatables.net-buttons": "^3.0.1",
"datatables.net-buttons-bs5": "^3.0.1",
"datatables.net-colreorder": "^2.0.0",
"datatables.net-colreorder-bs5": "^2.0.0",
"datatables.net-datetime": "^1.5.2",
"datatables.net-fixedcolumns": "^5.0.0",
"datatables.net-fixedcolumns-bs5": "^5.0.0",
"datatables.net-fixedheader": "^4.0.1",
"datatables.net-fixedheader-bs5": "^4.0.1",
"datatables.net-plugins": "^2.0.2",
"datatables.net-responsive": "^3.0.1",
"datatables.net-responsive-bs5": "^3.0.1",
"datatables.net-rowgroup": "^1.5.0",
"datatables.net-rowgroup-bs5": "^1.5.0",
"datatables.net-rowreorder": "^1.5.0",
"datatables.net-rowreorder-bs5": "^1.5.0",
"datatables.net-scroller": "^2.4.1",
"datatables.net-scroller-bs5": "^2.4.1",
"datatables.net-select": "^2.0.0",
"datatables.net-select-bs5": "^2.0.0",
"dropzone": "^5.9.3",
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"es6-shim": "^0.35.8",
"esri-leaflet": "^3.0.12",
"esri-leaflet-geocoder": "^3.1.4",
"flatpickr": "^4.6.13",
"flot": "^4.2.6",
"fslightbox": "^3.4.1",
"fullcalendar": "^5.11.5",
"handlebars": "^4.7.8",
"inputmask": "^5.0.8",
"jkanban": "^1.3.1",
"jquery": "^3.7.1",
"jquery.repeater": "^1.2.1",
"jstree": "^3.3.16",
"jszip": "^3.10.1",
"leaflet": "^1.9.4",
"line-awesome": "^1.3.0",
"lozad": "^1.16.0",
"moment": "^2.30.1",
"nouislider": "^15.7.1",
"npm": "^10.5.0",
"pdfmake": "^0.2.10",
"prism-themes": "^1.9.0",
"prismjs": "^1.29.0",
"select2": "^4.1.0-rc.0",
"smooth-scroll": "^16.1.3",
"sweetalert2": "^11.4.8",
"tiny-slider": "^2.9.4",
"tinymce": "^7.0.0",
"toastr": "^2.1.4",
"typed.js": "^2.1.0",
"vis-timeline": "^7.7.3",
"wnumb": "^1.2.0"
},
"devDependencies": {
"alpinejs": "^3.13.8",
"autoprefixer": "^10.4.19",
"del": "^7.1.0",
"laravel-datatables-vite": "^0.5.2",
"laravel-mix": "^6.0.49",
"laravel-mix-purgecss": "^6.0.0",
"lodash": "^4.17.21",
"postcss": "^8.4.38",
"postcss-import": "^16.1.0",
"replace-in-file-webpack-plugin": "^1.0.6",
"resolve-url-loader": "^5.0.0",
"rtlcss": "^4.1.1",
"sass": "^1.55.0",
"sass-loader": "^13.3.3",
"webpack-rtl-plugin": "^1.3.0"
}
}Here is my composer.json
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"version": "8.2.5",
"require": {
"php": "^8.0.2",
"diglactic/laravel-breadcrumbs": "^8.1",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "^10.0",
"laravel/sanctum": "^3.0",
"laravel/socialite": "^5.6",
"laravel/tinker": "^2.7",
"livewire/livewire": "^3.0",
"spatie/laravel-permission": "^5.10",
"yajra/laravel-datatables": "^10.0"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/breeze": "^1.14",
"laravel/pint": "^1.0",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^7.0",
"phpunit/phpunit": "^10.0",
"spatie/laravel-ignition": "^2.0"
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi",
"@php artisan vendor:publish --force --tag=livewire:assets --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"@php -r \"file_exists(".env") || copy(".env.example", ".env");\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true,
"allow-plugins": {
"pestphp/pest-plugin": true
}
},
"minimum-stability": "dev",
"prefer-stable": true
}I have updated all packages of node and composer now i am facing this issue
while running npm run prod
[webpack-cli] RangeError: Invalid string length
at String.replace (<anonymous>)
at .................................\node_modules\replace-in-file-webpack-plugin\index.js:27:32
at Array.reduce (<anonymous>)
at replace (.................................\node_modules\replace-in-file-webpack-plugin\index.js:26:19)
at .................................\node_modules\replace-in-file-webpack-plugin\index.js:71:6
at Array.forEach (<anonymous>)
at .................................\node_modules\replace-in-file-webpack-plugin\index.js:62:11
at Array.forEach (<anonymous>)
at done (.................................\node_modules\replace-in-file-webpack-plugin\index.js:46:16)
at _next2 (eval at create (.................................\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:51:1)
Replies (11)
If you need any more help or have any other questions, feel free to ask. You're doing great!
Hi Vipul Walia and everyone,
Apologies for the delay. Here's a workaround to handle the issue you're facing. We'll make sure to fix it in future updates.
In your webpack.mix.js file, replace the following block of code:
{
// keenicons
search: /url\(.*?((keenicons-.*?)\..*?)"?\)/g,
replace: "url(./fonts/$2/$1)",
},With this block of code:
{
// keenicons
search: /url\("?fonts\/(keenicons-.*?)\.(.*?)"?\)/g,
replace: "url(./fonts/$1/$1.$2)",
},This should resolve the issue. If you need further assistance, feel free to ask.
After using this above code build is successful but now icons are not loading
Could you please try to copy it again? We made some changes to the code.
Thank you
I'm still experiencing that problem, I used Yannick Lalleau solution down here but then I got an error for resources\_keenthemes\src\media\svg\files\pdf.sv telling me it wasn't able to copy that SVG to /public.
I commented the whole SVG code and now it's working.
Is there a better fix for this right now?
For me, i use this solution :
// keenicons
search: /url\(['"]?fonts\/(keenicons-.*?)\.(.*?)(\?[^'"]*)?['"]?\)/g,
replace: "url(./fonts/$1/$1.$2)",
YESSSSS THAT WORKED PERFECTLY. You are the best
npm i @ckeditor/ckeditor5-alignment @ckeditor/ckeditor5-build-balloon @ckeditor/ckeditor5-build-balloon-block @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-build-decoupled-document @ckeditor/ckeditor5-build-inline @eonasdan/tempus-dominus @fortawesome/fontawesome-free @popperjs/core @shopify/draggable @yaireo/tagify acorn apexcharts autosize axios bootstrap bootstrap-cookie-alert bootstrap-daterangepicker bootstrap-icons bootstrap-maxlength bootstrap-multiselectsplitter chalk chart.js clipboard countup.js cropperjs datatables.net datatables.net-bs5 datatables.net-buttons datatables.net-buttons-bs5 datatables.net-colreorder datatables.net-colreorder-bs5 datatables.net-datetime datatables.net-fixedcolumns datatables.net-fixedcolumns-bs5 datatables.net-fixedheader datatables.net-fixedheader-bs5 datatables.net-plugins datatables.net-responsive datatables.net-responsive-bs5 datatables.net-rowgroup datatables.net-rowgroup-bs5 datatables.net-rowreorder datatables.net-rowreorder-bs5 datatables.net-scroller datatables.net-scroller-bs5 datatables.net-select datatables.net-select-bs5 dropzone es6-promise es6-promise-polyfill es6-shim esri-leaflet esri-leaflet-geocoder flatpickr flot fslightbox fullcalendar handlebars inputmask jquery jquery.repeater jstree jszip leaflet line-awesome lozad moment nouislider npm pdfmake prism-themes prismjs rimraf select2 smooth-scroll sweetalert2 tiny-slider tinymce toastr typed.js vis-timeline wnumb
npm i -D alpinejs autoprefixer del laravel-datatables-vite laravel-mix laravel-mix-purgecss lodash postcss postcss-import replace-in-file-webpack-plugin resolve-url-loader rtlcss sass sass-loader
These packages are not compatible with the latest version
sweetalert2
jkanban
webpack-rtl-plugin
WE ARE UNABLE TO CREATE BUILD
Please help us
problem issue???
Hi,
Having the same issue. Hopefully a fix is soon given.
Hallo,
I have the same Problem, hope for help!
