Maximum call stack size exceeded on npm run dev

Hello,

I'm occurring an issue while I'm trying to npx vite build Vite with Laravel. It's the same as npm run dev or whatever.

I got this error :

error when starting dev server:
RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)
    at /var/www/html/node_modules/vite/dist/node-cjs/publicUtils.cjs:4185:54
    at Array.reduce (<anonymous>)
    at _interpolate (/var/www/html/node_modules/vite/dist/node-cjs/publicUtils.cjs:4184:18)
    at /var/www/html/node_modules/vite/dist/node-cjs/publicUtils.cjs:4218:15
    at Array.reduce (<anonymous>)
    at _interpolate (/var/www/html/node_modules/vite/dist/node-cjs/publicUtils.cjs:4184:18)

    at _interpolate (/var/www/html/node_modules/vite/dist/node-cjs/publicUtils.cjs:4184:18)

For more contextual informations, it runs on a Docker's container based on AlmaLinux 8 with PHP 8.1, nodejs 18 and vite 4.3.9. I already updated those packages but it changes nothing.

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',
        port: 8010,
    },
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});

app.js :

import('./bootstrap');
import '../sass/app.scss';
import '../css/fontawesome/all.css';

And my bootstrap.js :

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

And my package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "vite",
        "build": "vite build",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.8",
        "autoprefixer": "^10.4.14",
        "axios": "^1.4.0",
        "bootstrap": "^5.3.0",
        "laravel-vite-plugin": "^0.7.8",
        "lodash": "^4.17.21",
        "postcss": "^8.4.24",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.63.4",
        "sass-loader": "^13.3.2",
        "vite": "^4.3.9"
    }
}

It worked fine few weeks ago and nothing changes. All the environment variable are fine and filled, I just don't find where it comes from. I can't find anything on the internet related to this issue… Could you help me, please ?

Thank you.

LaryAI

2 years ago

Level 58

This error is usually caused by an infinite loop or a function that calls itself too many times. In this case, it seems to be related to a regular expression in the Vite library.

One possible solution is to try updating the Vite library to the latest version. You can do this by running the following command in your terminal:

npm install vite@latest

If that doesn't work, you can try disabling the Vite plugin in your Laravel configuration file and see if the error goes away. To do this, comment out the following lines in your vite.config.js file:

plugins: [
    laravel({
        input: [
            'resources/js/app.js',
        ],
        refresh: true,
    }),
],

Then, run npm run dev again and see if the error persists. If it does, you may need to look for other potential causes of the error in your codebase.

Please or to participate in this conversation.