TypeError when starting Vite

[mikewink]

Hello Team defstudio,

first, I would like to say thank you for this great plugin! 🏆

When I follow the installation steps for the plugin, I get this error message back:

failed to load config from /Users/BOB/Dev/PHP/Laravel/PROJECT/vite.config.js
error when starting dev server:
TypeError: livewire is not a function
    at file:///Users/BOB/Dev/PHP/Laravel/PROJECT/vite.config.js.timestamp-1683899540373-e3c526847558a.mjs:14:5
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

I have another (older) Laravel project that works just fine with the given instructions. I noticed that package.json now is of type=module and that the postcss.config is now export default { instead of module.exports = {, but I do not know if that is the reason.

My current vite.config.js looks like this:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-livewire-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: false,
        }),
        livewire({
            refresh: ['resources/css/app.css'],
        }),
    ],
});

Package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@defstudio/vite-livewire-plugin": "^1.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0"
    }
}

Laravel: 10.10.1 Jetstream: 3.2.0 Livewire: 2.12.3 Alpine.js: 3.12.1

[fabio-ivona]

Hi we'll try to reproduce this error, thanks for pointing it out

[bnzo]

This is because of the module type added in https://github.com/laravel/laravel/pull/6090

It should work again if you modify your package.json

{
    "private": true,
    "type": "commonjs",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@defstudio/vite-livewire-plugin": "^1.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0"
    }
}

and also your postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

[GoodM4ven]

All packages are working on migrating, or have already implemented, this new design. I think the package need to support it by default, if maintaining its essential position in the default Laravel stack (TALL) is its primary objective.

[fabio-ivona]

We are working toward the support for module system, will be released in a few days

[fabio-ivona]

Fixed in v1.2.1 by #56

sorry about the hiatus, had a lot of work lately, had to be sure not do break anything