如何在 laravel (sweetalert2) 中包含来自 node_modules 的文件

Question

I am trying to include sweetalert but it's seems like I misunderstood the instructions from the documentations. Currently struggling how to include files from node_modules folder.

In my blade I put script like these:

$(document).ready(function() {
    Swal.fire(
        'The Internet?',
        'That thing is still around?',
        'question'
    )
});

---

I tried all these methods but none works:

Method (1) - adding these codes in my app.js file (base from sweetalert doc )

mix.copy('node_modules\sweetalert2\dist\sweetalert2.js', 'public/js/sweetalert2.js');
mix.copy('node_modules\sweetalert2\dist\sweetalert2.css', 'public/js/sweetalert2.css');

Method (2) - adding these codes in my app.js file (based from laravel doc )

<link href="{{ asset('js/sweetalert2.js') }}">
<script src="{{ asset('js/sweetalert2.css') }}"></script>

and then,

 <link href="{{ asset('js/sweetalert2.js') }}"> <script src="{{ asset('js/sweetalert2.css') }}"></script>

---

It always returns an error from my console

ReferenceError: mix is not defined

see full error logs: image

---

Sorry for my ignorance. Can someone knows how / what is really a proper way of including a file(s) from node_modules?

Answer 1

you don't need use mix to copy the sweatalert js file to public path

1. Install sweatalert with npm

npm install sweetalert2

2. You have two different choices in your app.js file use

import Swal from 'sweatalert2';

OR

var Swal = require('sweatalert2');

after that run the below command to compile the js file

npm run watch

after that append js file in the app layout after that in each file you can use Swal module

$(document).ready(function() {
    Swal.fire(
        'The Internet?',
        'That thing is still around?',
        'question'
    )
});

but you must do this after the section you import the app.js file because before that Swal not loaded in your project

Answer 2

1. Install sweet Alert 2 with npm

    npm install sweetalert2

2. In your app.js file

   import swal from 'sweetalert2'; window.swal = swal; const toast = swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 }); window.toast = toast;

3. in your component

   swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!" + id, type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result) => { // Send request to the server if (result.value) { axios.delete("api/category/" + id).then(() => { toast.fire({ type: 'success', title: 'Deleted successfully' }); }).catch(() => { toast.fire({ type: 'error', title: 'Error Occurred..!' }) }); } })

4. run npm run dev

    npm run dev

Answer 3

Put const mix = require('laravel-mix'); in webpack at first line. at try to re run webpack.

Answer 4

Maybe put of time but try in bootstrap.js:

import Swal from 'sweetalert2';

then in the same file inside the try section:

window.Swal = require('sweetalert2');