Js-cookie: Please update import example

Created on 26 Sep 2019 · 20Comments · Source: js-cookie/js-cookie

This should be used in the README instead of the outdated dist approach:

import Cookies from 'js-cookie';

Source

redaxmedia

All 20 comments

Could you point me to exactly what you’re referring to? I can’t follow. A pull request would also be highly appreciated.. thanks!

carhartl on 26 Sep 2019

I am using this library inside a single page application and the current import example is just misleading from my point of view. There is no dist folder published in NPM also.

https://github.com/js-cookie/js-cookie#es-module

import Cookies from './node_modules/js-cookie/dist/js.cookie.mjs'

redaxmedia on 26 Sep 2019

We're only providing a single default export.. not sure what I'm missing, but how would * work?

https://github.com/js-cookie/js-cookie/blob/0d16266152377b421a6951ea630c1b1e2b7732af/src/js.cookie.mjs#L144

There's currently work in progress for v3, supporting ES modules right away, and what you're looking at might be the documentation at master (which doesn't apply to v2).

carhartl on 26 Sep 2019

As the readme tries to advise, you should take a look at the documentation for the latest _release_, which is here: https://github.com/js-cookie/js-cookie/tree/latest#readme

v3 hasn't been released yet.

carhartl on 26 Sep 2019

Sorry, I did NOT read that hint. If possible, create an index.js to export the internal dist file:

export { Cookie } from './dist/js.cookie.mjs';

So we can still use the following:

import Cookies from 'js-cookie';

redaxmedia on 26 Sep 2019

👍1

Ah, thanks, that never seemed right to me, going to look into this..

carhartl on 26 Sep 2019

👍1

Not sure how this is going to work! The idea was that in the package definition we have a browser property (instead of main) pointing to the UMD variant of this library, for maintaining full compatibility. And then there’s a module property, pointing to the ES module distribution — this is what both webpack and rollup advise going forward with ES modules until there’s going to be a standardized approach — so we’re supporting ES module in this way.

The index.js that you’re proposing would only work when used with main/browser?

carhartl on 27 Sep 2019

Ah, no.. the index.js is supposed to sit in the root.

carhartl on 27 Sep 2019

I never worked with release-it but you might use their hooks to create or copy the index.js to the root.

"hooks": {
    "after:bump": "npm run dist-that-also-copies-index"
}

Let me know if you need a helpful hand or someone for testing.

In case you didn't know... just add 3.0.0-beta.1 to your package.json to release a unstable version. A badge like this will help to recognize as it changes the color according to the stability.

npm

https://img.shields.io/npm/v/js-cookie

redaxmedia on 27 Sep 2019

This could become useful: https://www.npmjs.com/package/create-index

carhartl on 2 Oct 2019

Nice... I've set up a little webpack example, ~and using module in the package definition seems to be all we need.~

import Cookies from 'js-cookie'

works without adding another index.js file at all. I'm going to adapt the documentation and might also add the example to the repo.

carhartl on 3 Oct 2019

👍1

..but because we‘re using both the browser and module properties in the package.json, webpack uses the former for bundling:

https://github.com/webpack/webpack/blob/86a2829147c0ae78797b48c121bf5e11a8151562/lib/WebpackOptionsDefaulter.js#L348

https://webpack.js.org/configuration/resolve/#resolvemainfields

carhartl on 4 Oct 2019

Tested with the following webpack.config.js and it works the same, this time picking up the ES module dist file:

module.exports = {
  resolve: {
    mainFields: ['module', 'main']
  }
}

carhartl on 4 Oct 2019

@redaxmedia I've just released v3 as a beta, would be helpful if you find the time to try it out:

$ npm install --save js-cookie@beta

carhartl on 5 Oct 2019

@carhartl thanks for your work. However, when using the lib (3.0.0-beta.1) outside a bundle, in my case in a jest test, i get the following error when importing it with: