javascript - Alpine.js not being detected on the page after being loaded with Laravel Mix - Stack Overflow

admin管理员组

文章数量:1324968

Alpine.js is not being detected on the page after being loaded with Laravel Mix.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').sourceMaps()
    .postCss('resources/css/app.css', 'public/css', [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer'),
        ]
    ).version().sourceMaps();

resources/js/app.js

import 'alpinejs';

I tried doing require(alpinejs), but it had the same effect.

I've added my js file to a blade template.

<script src="{{ mix('/js/app.js') }}"></script>

I also tried linking to /public/js/app.js without using the mix() helper. No effect, but Alpine.js doesn't get detected, and it doesn't work (so it's not an error with Alpine.js dev tools). However, adding Alpine via a CDN works just fine, so the problem must be with Laravel Mix. My public/js.app file is here:

Alpine.js is not being detected on the page after being loaded with Laravel Mix.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').sourceMaps()
    .postCss('resources/css/app.css', 'public/css', [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer'),
        ]
    ).version().sourceMaps();

resources/js/app.js

import 'alpinejs';

I tried doing require(alpinejs), but it had the same effect.

I've added my js file to a blade template.

<script src="{{ mix('/js/app.js') }}"></script>

I also tried linking to /public/js/app.js without using the mix() helper. No effect, but Alpine.js doesn't get detected, and it doesn't work (so it's not an error with Alpine.js dev tools). However, adding Alpine via a CDN works just fine, so the problem must be with Laravel Mix. My public/js.app file is here:

https://gist.github./jardayn/2a25cdbed23a7b78e48da596a1eefe9e

• javascript
• laravel
• alpine.js

Share Follow edited Jul 7, 2021 at 19:26 user633440 asked Jul 7, 2021 at 15:06 Igor Q.Igor Q. 7281010 silver badges2323 bronze badges 2

• 1 Have you read alpinejs.dev/essentials/installation#as-a-module? – SuperDJ Commented Jul 7, 2021 at 15:10
• @SuperDJ no I haven't. Thanks. You can post your response as an answer and I'll mark it as the correct one – Igor Q. Commented Jul 7, 2021 at 17:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

According to the docs of Alpine 3 you need to initialize it.

After installing alpinejs with npm install alpinejs. You can initialize it with:

import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

本文标签： javascriptAlpinejs not being detected on the page after being loaded with Laravel MixStack Overflow