How to correctly require js-cookie with npm and webpack? Uncaught ReferenceError

Question

Strange problem but I'm sure it's easily solved. I've tested on a completely empty webpack project.

It says npm js-cookie has 0 dependencies so I guess this should work on its own.

$ npm install js-cookie --save

Then simply ran this in my script file.

require('js-cookie');

Cookies.set('name', 'value');

The node vendor js-cookie 100% exists and no errors on the require.

However just get this error.

Heres a test project you can download and spin up using npm install and then npm run production to see error.

http://dev.joshmoto.wtf/npm-webpack-jscookie-project.zip

I'm using laravel mix but I don't see how that can be a the problem?

Palinode

const Cookies = require("js-cookie") – Christensen

Thank dude this worked but then I had to set global.Cookies = require('js-cookie'); in order for it to work in my other required js files. But i get the idea now. – Palinode

Answer 1

You have to assign the required module to a variable in order to use it.

const Cookies = require('js-cookie'); //assign module to variable called "Cookies"
Cookies.set('name', 'value');
console.log(Cookies.get('name'));

Read more about this here: https://nodejs.org/api/modules.html

Oracle

Ah great thanks I had to set to global.Cookies = require('js-cookie'); in order for it to work in my other required js files but I see whats going on now. Cheers for node modules link i'll read up on it. – Palinode

You can also require the module (and set it to a const variable) in every file where you need to use it. – Oracle

Answer 2

This also works import * as Cookies from 'js-cookie';

Using: webpack encore from Symfony 4/5

Churinga

Nice i'll give it a shot next time. Thanks – Palinode