Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Rymercyble's avatar

Vue3 Cannot read property 'startsWith' of undefined

Hi, I'm trying to setup laravel 8, vue 3, inertia, bootstrap 5. I was getting all sort of errors I figured somehow mainly by starting over but this one I have no idea

Error appears when running npm run dev

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.5.0",
        "@inertiajs/inertia-vue": "^0.4.0",
        "@inertiajs/inertia-vue3": "^0.2.0",
        "@inertiajs/progress": "^0.1.2",
        "@vue/compiler-sfc": "^3.0.2",
        "axios": "^0.21.0",
        "bootstrap": "^5.0.0-alpha2",
        "cross-env": "^7.0.2",
        "laravel-mix": "^5.0.7",
        "laravel-mix-vue3": "^0.7.0",
        "lodash": "^4.17.20",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.27.0",
        "sass-loader": "^10.0.4",
        "vue": "^3.0.2",
        "vue-template-compiler": "^2.6.12"
    }
}

webpack.mix.js

const mix = require('laravel-mix');

require('laravel-mix-vue3');

mix.vue3('resources/js/app.js', 'public/js', {
    typescript: false,
}).sass('resources/sass/app.scss', 'public/css');

app.js

import './bootstrap';
import { createApp, h } from 'vue';
import { app, plugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');
el.classList.add("h-full");

InertiaProgress.init({
    delay: 250,
    color: '#29d',
    includeCSS: true,
    showSpinner: false,
});

createApp({
    render: () => h(app , {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: name => require(`./Pages/${name}`).default
    }),
}).use(plugin).mount(el);

error won't appear until running vue init

createApp({
    render: () => h(app , {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: name => require(`./Pages/${name}`).default
    }),
}).use(plugin).mount(el);
0 likes
1 reply
Rymercyble's avatar
Rymercyble
OP
Best Answer
Level 4

for future readers

"@types/webpack-env": "^1.15.3",

was "missing" (nowhere mentioned you need it)

Please or to participate in this conversation.