CODEWITHSUNDEEP
javascriptnode.jslaravelnpmvite
Timmsy
Timmsy

Reputation: 75

Laravel 9.1 / Vite - "TypeError: laravel is not a function" When Running "NPM Run Dev"

I am attempting to build a web app using Laravel 9.1 which comes with Vite, personally I've never used Vite before so I'm not too sure about this error.

I seem to be receiving the error

TypeError: laravel is not a function

whenever I run npm run dev. I get the same error when running build.

Below I will post my package.json & my vite.config.js files.

Package.json

{
    "type": "module",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^2.3.3",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.2.4"
    },
    "dependencies": {
        "got": "^11.8.3",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.1"
    }
}

vite.config.js

import laravel from 'laravel-vite-plugin'

import vue from '@vitejs/plugin-vue'

import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

I'm not sure how to fix this error, or proceed with this error occurring when attempting to run dev.

Thanks in Advance for any help :)

I have tried reinstalling the node modules, updating Node to v19 and even fully restarted the project install.

Upvotes: 3

Views: 4279

Answers (2)

alejandro00
alejandro00

Reputation: 154

I notice that "type": "module" wasn't the problem

this was my package.json at first commit

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0.0",
        "sass": "^1.79.4",
        "vite": "^5.0.0"
    },
    "dependencies": {
        "bootstrap": "^5.3.3",
        "bootstrap-icons": "^1.11.3",
        "jquery": "^3.7.1"
    }
}

After installing tailwindcss and @tailwind/vite got that error and notice that laravel-vite-plugin was downgraded from 1.0.0 to 0.1.0, so manually change it to 1.0.0 then run npm run dev

This is my package.json now

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.2.0",
        "postcss": "^8.4.31",
        "sass": "^1.79.4",
        "tailwindcss": "^3.4.17",
        "vite": "^5.0.0"
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.0.6",
        "bootstrap": "^5.3.3",
        "bootstrap-icons": "^1.11.3",
        "jquery": "^3.7.1"
    }
}

Laravel 10.10 PHP 8.1

Upvotes: 1

Ivan_OFF
Ivan_OFF

Reputation: 357

Try removing

"type" : "module"

From your package.json, it worked for me but i am still investigating the reason behind

Upvotes: 11

Related Questions