Usage of citation.js in Browser with webpack fails

[jd88]

Usage of citation.js in Browser with webpack fails

This is the browser example:

const example = new Cite({title: 'Thing A'})

example.add([{title: 'Thing B'}, {title: 'Thing C'}])

console.log(example.data)

example.format('bibliography', { format: 'html', template: 'apa' })

Error: TypeError: Cannot read property 'system_id' of undefined (anonymous function) node_modules/@citation-js/plugin-csl/lib-mjs/engines.js:15 12 | 13 | const getWrapperProxy = original => function (state, entry) { 14 | if (state.sys.wrapBibliographyEntry) {

15 | let _state$sys$wrapBiblio = state.sys.wrapBibliographyEntry(this.system_id), 16 | _state$sys$wrapBiblio2 = _slicedToArray(_state$sys$wrapBiblio, 2), 17 | prefix = _state$sys$wrapBiblio2[0], 18 | postfix = _state$sys$wrapBiblio2[1];

The issue has been discussed here as well: https://github.com/parcel-bundler/parcel/issues/3372

Any idea how to solve this?

[larsgw]

I'll take a look (next week, I'm not available right now). This shouldn't happen but I'm not sure if that's because of citeproc or not.

[larsgw]

Okay, figured it out. Background: to add affixes to bibliography entries (like DOIs for Vancouver, Altmetric badges etc.), the internal formatting instructions of citeproc-js have to be amended. This is done by replacing the @bibliography/entry style by a proxy function, which computes and adds the affixes before calling the original @bibliography/entry styles.

Two things going wrong here:

1. The @bibliography/entry style is proxied twice, once for @citation-js/plugin-csl/lib-mjs/engine.js (required by @citation-js/plugin-csl) and once for @citation-js/plugin-csl/lib/engine.js (required by citation-js for backwards compatibility). This does not matter for NodeJS or the Browserify bundle since they don't use lib-mjs/.
2. The original @bibliography/entry style is called without passing along this, which is fine for the original style since it does not use this, but it does matter when the "original" of the outer proxy is actual the inner proxy (which does use this).

[larsgw]

This should be fixed in v0.4.9.