Can't use npm package in Typescript and Webpack project

[tzorzan]

Hi,
I'm trying to use the library in my project, based on Typescript targeting es6 and using commonjs modules. The final output is produced using Webpack and targeting the web platform.

I've installed the dependency with npm:

npm install --save jose-jwe-jws

and try to reference it in my code:

import {Jose} from "jose-jwe-jws";
...
let cryptographer = new Jose.WebCryptographer();
...

Everything compiles good, but when I run the result of webpack in my page, I've got an error:

Uncaught ReferenceError: Jose is not defined

I've got the same error trying to run tests with Mocha... :-(
What I'm missing?

Thank You

[wfortin]

Having the same issue while updating from v0.11.1 to v.1.1.3.

Trying to import in a few different ways:

import {Jose} from "jose-jwe-jws";
import * as Jose from "jose-jwe-jws";
import Jose from "jose-jwe-jws";

All turn out with Jose beign an empty object.

[wfortin]

v0.11.1 works when I import and use as such:

import * as Jose from 'jose-jwe-jws'
const cryptographer = new Jose.Jose.WebCryptographer()

I need to update to the latest version since snyk.io has found vulnerabilities in lodash.merge@4.6.1 in v0.11.1

[wfortin]

Seems that the issue lies in the webpack configuration:

  output: {
    filename: 'jose.js',
    library:'Jose',
    libraryTarget: 'var'

using

    libraryTarget: 'umd' | 'commonjs'

Pull #89 does some changes in regards to this. Can this be looked at, right now this configuration doesn't allow using the library as a node module or a ES6 module.
Thanks.

[alokmenghrajani]

#89 has conflicts. If it builds, I'm happy to merge it.

[wfortin]

Let me suggest a PR for this.

[tzorzan]

Thank you for your feedback. I've already headed to this configuration:

    libraryTarget: 'umd' | 'commonjs'

and also tried:

Pull #89

installing npm package from Mischala/js-jose#exportCjsPackage but neither works.
I'll try to investigate further.

Thanks.

[wfortin]

Yeah, my attempts have proved that we would need to tweak the definition file... And I end up having issues with decryption on that new package. Let me know if you end up with a solution.

[wfortin]

I have resorted to use version 0.1.6 where I can use it like this in my TS project.

import * as Jose from 'jose-jwe-jws'

const cryptographer = new Jose.Jose.WebCryptographer()

[damnhandy]

We're seeing the same issue here. Just like @wfortin, only 0.1.6. works were as 0.1.7 fails.

[mbyczkowski]

@damnhandy @wfortin this should be fixed in 0.2.0

[wfortin]

@mbyczkowski care to give an example with 0.2.0?

I still end up with an object that contains almost nothing when importing in all these different ways:

import {Jose} from "jose-jwe-jws";
import * as Jose from "jose-jwe-jws";
import Jose from "jose-jwe-jws";

Seems that the TS definitions are fixed now, but at runtime I get:

import * as Jose from "jose-jwe-jws";

import {Jose} from "jose-jwe-jws";

import Jose from "jose-jwe-jws";

I get the error Module '"jose-jwe-jws"' has no default export.

So it seems the webpack configuration is still incorrect, as the object is defined but the exported methods are not in that object.
The added test in here 60a948c checks if the object is not empty, which is true, but it doesn't contain the methods/keys like WebCryptographer, Utils, etc.

So I'm still sticking to 0.1.6 as mentionned here

[wfortin]

I've added a codesandbox to replicate the issue here:

v0.2.0 (not working as described in my last comment) : https://codesandbox.io/s/hopeful-mirzakhani-2m2bz?fontsize=14

v0.1.6 (working) : https://codesandbox.io/s/jose-jwe-jws020-0w7y9?fontsize=14

Hope this helps!

[mbyczkowski]

@wfortin thanks for the repro. I'm going to look into this.

[mbyczkowski]

@wfortin I thought I had a fix for this in #116, but after grabbing your repro, I can still see the issue in 0.2.1. I wonder if this is packaging problem now (babel, webpack, parcel etc.) 🤔

[dkowis]

I've submitted a pull request that allows me to import it in my Angular 8 application, satisfying the Typescript + Webpack problem. UMD library packaging should allow it to continue to be used as a var, but also an importable module.

[peitschie]

Anyone else still struggling with this, I was able to workaround the issue by directly importing the non-minified JS files. All the contained paths there were relative, so webpack was able to figure out how to wire this all together ok from that.

E.g., I've made a file called js-jose.ts in my project, with this content:

/// <reference types="jose-jwe-jws" />
(window as any).Jose = require("jose-jwe-jws/lib/jose-core.js");

Once that is done, I simply import that somewhere, and things work!

[mbelge]

Indeed it works as expected with this last commit, when do you plan a new release with corresponding npm package as well ? Thx.

[mbyczkowski]

I have just released 0.2.2. @mbelge feel free to re-open the issue if you're still seeing the problem in the latest release.