Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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)


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


Hallo,
I have the same Problem, hope for help!



Hi,

Having the same issue. Hopefully a fix is soon given.



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



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



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



If you need any more help or have any other questions, feel free to ask. You're doing great!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(