Menu
I tried installing js-cookie (https://github.com/js-cookie/js-cookie) using npm in my Laravel project, but I keep getting the same ReferenceError: Cookies is not defined error. It works just fine with a local copy of js-cookie and via CDN, but I would like to figure out why it doesn't work via npm.
What I've tried:
npm i js-cookie
npm i js-cookie --save
npm i js-cookie --save-dev
followed by
npm run dev
What I get as a result:
- js-cookie v 2.2.1 gets included in my package.json under dependencies or devDependencies
- js-cookie appears under node_mnodules
- ReferenceError: Cookies is not defined while trying to use any Cookies functions
Any help would be greatly appreciated!
Edit 1 - including all my code
My master.blade.php looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title')</title>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/nightmode-toggle.css') }}">
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/nightmode-toggle.js') }}"></script>
</head>
<body id="mybody">
@include('layouts.navbar')
<div class="content">
@yield('content')
</div>
</body>
</html>
The content of the nightmode-toggle.css are just a few classes I toggle on and off while clicking a "Nightmode" checkbox:
body.night {
background:black;
color:white;
}
.navbar.night {
background-color:black;
color:white;
}
etc...
The content of nightmode-toggle.js:
$(document).ready(function () {
if (Cookies.get('nightmode-toggle') != 'on' && Cookies.get('nightmode-toggle') != 'off') {
Cookies.set('nightmode-toggle', 'off');
}
if (Cookies.get('nightmode-toggle') == 'off' && $('body').hasClass('night')) {
$('body').toggleClass('night');
$('.navbar').toggleClass('night');
etc...
} else if (Cookies.get('nightmode-toggle') == 'on' && !$('body').hasClass('night')) {
$('body').toggleClass('night');
$('.navbar').toggleClass('night');
etc...
}
$('#nightmode-toggle').click(function () {
if (Cookies.get('nightmode-toggle') == 'off') {
Cookies.set('nightmode-toggle', 'on');
$('body', ).toggleClass('night');
$('.navbar').toggleClass('night');
etc...
} else {
Cookies.set('nightmode-toggle', 'off');
$('body').toggleClass('night');
$('.navbar').toggleClass('night');
etc...
}
$.ajax({
type: "POST",
url: "/toggle",
success: function () {
},
error: function () {
alert('Could not switch to Night Mode for some reason! Please try again later.');
}
});
})
});
As I said earlier, if I include a local js-cookie.js file in the header, like so
<script type="text/javascript" src="{{ asset('js/js-cookie.js') }}"></script>
or if I include CDN in the header, like so
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
everything works perfectly fine aka cookies get recorded correctly and classes change depending on the cookie. But I really want to figure out how to include js-cookie using npm as instructed by the developer.
471
asked Oct 20 '25 01:10
You need to import the library in bootstrap.js or app.js as an ES6 module as per the docs
import Cookies from 'js-cookie'
Then use it anywhere else like so
Cookies.set('foo', 'bar')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
