First some quick infos for the setup.
package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"watch": "vite build --watch"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.5",
"postcss": "^8.4.23",
"postcss-import": "^15.1.0",
"tailwindcss": "^3.3.2",
"sass": "^1.62.1",
"vite": "^4.0.0"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.3",
"alpinejs": "^3.12.1"
}
}
vite.config.js
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: [{
// this is required for the SCSS modules
find: /^~(.*)$/, replacement: '(DOLLARSIGN)1',
},],
},
});
bootstrap.js
.
.
.
/**
* AlpineJS Integration
*/
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
I use npm run build to compile the assets. I have a div in my view with x-data="{ mobileNavVisible: false }.
But upon loading the page i get the following error:
Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)}[n] is not a function
x-init works but all x-on events wont trigger because of this.
As i understand it means that im missing a semicolon. The Devtools even show where. The problem is that i obviously can't add that there since that JS file is compiled by Vite and that part of the code is poart of AlpineJS anyway.
Is this a bug or did i miss configure something ?