Laravel 9 cannot import AlpineJS, or jQuery into my project

user_9361135 0
Viewed 382

Let's start with jQuery. I first ran:

npm install jquery-ui --save-dev

Then in my own file custom.js I added the following lines:

import $ from 'jquery';

$('#logo').on('click', function(){
    alert("Hello")
    })

In the main html file I imported the custom js file

<script src="{{ asset('js/custom.js') }}" type="module"></script>

Does not work and I get the error: Uncaught TypeError: Error resolving module specifier “jquery”. Relative module specifiers must start with “./”, “../” or “/”.

If I remove the type=module from the main html file I get a different error: Uncaught SyntaxError: import declarations may only appear at top level of a module.

What am I doing wrong and what step miss to install jQuery so it can work pls?

Next I tried Alpine JS

I cleared my custom.js file and tried to install alpine js doing the following:

npm install alpinejs

then in my empty custom.js file:

import Alpine from 'alpinejs'
 
window.Alpine = Alpine
 
Alpine.start()

Then I ran

npm run dev

In the main html file I added the script tag

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

and in the body to test if it works I added:

    <div x-data="{ show: false }">
        <button @click="show = !show">Show</button>
        <h1 x-show="show">Alpine Js is working !</h1>
    </div>
    <hr>

    <div x-data>
        <button @click="alert('Alpine Js is working !')">Click</button>
    </div>

If I click the button I get the following error in the console:

[Vue warn]: Property or method "alert" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>) 2 app.js:28785:15
[Vue warn]: Error in v-on handler: "TypeError: alert is not a function"

(found in <Root>) app.js:28785:15
TypeError: alert is not a function
    click http://127.0.0.1:8000/js/app.js line 39872 > Function:3
    invokeWithErrorHandling http://127.0.0.1:8000/js/app.js:30027
    invoker http://127.0.0.1:8000/js/app.js:30352
    _wrapper http://127.0.0.1:8000/js/app.js:35755
    add$1 http://127.0.0.1:8000/js/app.js:35759
    updateListeners http://127.0.0.1:8000/js/app.js:30384
    updateDOMListeners http://127.0.0.1:8000/js/app.js:35789
    invokeCreateHooks http://127.0.0.1:8000/js/app.js:34270
    createElm http://127.0.0.1:8000/js/app.js:34157
    createChildren http://127.0.0.1:8000/js/app.js:34254
    createElm http://127.0.0.1:8000/js/app.js:34155
    createChildren http://127.0.0.1:8000/js/app.js:34254
    createElm http://127.0.0.1:8000/js/app.js:34155
    patch http://127.0.0.1:8000/js/app.js:34717
    _update http://127.0.0.1:8000/js/app.js:32119
    updateComponent http://127.0.0.1:8000/js/app.js:32240
    get http://127.0.0.1:8000/js/app.js:32654

I know I can just add a script line with a CDN with either of the scripts I need, but I would really like to know why this is not working as I followed the instructions carefully on more than one website.

alpine.js laravel jquery javascript
1 Answers

regarding the Jquery import, is it as simple as defining it to window ? like this

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

I had problems with the Jquery syntax $("#alertbox").alert("close"); and as ".alert" is a bootstrap thing, i´m doing "import 'bootstrap';" in the file to be compiled.

But somehow i think the .js compiler removes it bc it cant se any use of it, Bc as you said i get it to work if i use the CDN link directly to the bootstrap in the header of the page.

But i think we both have some kind of missing command of "import it on this page because i use it"

user_112125630
Related