How to handle format() failing?

[jansensan]

Following the good guidance obtained in a previous question, I implemented a flow where a user can fill a form which we convert to a CSL object and then parse the citation. However, it seems Citeproc is randomly throwing this error:

Item is undefined

I have opened an issue with that library, but I am wondering if there is anything that is possible to do on our end to prevent this.

We tried using

const cite = new Cite(csl)

then

const citation = cite.format(...)

We also tried using

cite = cite.reset()
cite.set(csl)

and we tried

cite = await Cite.async(csl)

also to no avail.

We are ensuring to not call the method until we get a reply, we tried debouncing it, nothing doing. We are not looking to fetch any kind of data, we literally just want to generate a citation in HTML with the data we have in hand.

We are only interfacing with citation.js code, so we would appreciate any guidance.

[larsgw]

What version of Citation.js are you using? And are csl and the parameters of format(...) the same as in the previous question?

[jansensan]

Indeed, this is a follow up on the question linked above.

At the time of writing my issue, I was using "citation-js": "^0.5.0-alpha.7".

So basically, we are using React, which on every render of significance—we debounce to ensure we don't call the method too often or before it returns a value—calls the method to obtain a generated citation.

On first render, this is sent

{
  "ISBN": "9780262528290",
  "author": [
    {
      "family": "Kwastek",
      "given": "Katja"
    }
  ],
  "issued": {
    "date-parts": [
      [ "2013" ]
    ]
  },
  "publisher": "MIT Press",
  "publisher-place": "Cambridge, USA",
  "title": "Aesthetics of Interaction in Digital Art",
  "type": "book"
}

And the method is called like this:

const citation = cite.format(
  'bibliography',
  {
    format: 'html',
    template: 'mla',
  }
)

Finally, we obtain a properly formatted citation like this:

<div class="csl-bib-body">
  <div data-csl-entry-id="temp_id_7255512529128919" class="csl-entry">Kwastek, Katja. <i>Aesthetics of Interaction in Digital Art</i>. MIT Press, 2013.</div>
</div>

The issue occurs as soon as the user makes a change to any of the fields—which means the JSON CSL above changes—and then when we call the method anew.

A colleague found that it could be related to another issue that has been reported before. I tried reverting to "citation-js": "^0.5.0-alpha.6", but to no avail, at least in our attempted implementation.

Is the method trying to fetch data or compare the data to validate it somehow? We are looking only to format the citation in the end, we don't care if the values are invalid, because that is the responsibility of the user—in our context—to enter proper data.

[larsgw]

0.5.0-alpha.8 and above should have a fix for https://github.com/citation-js/citation-js/issues/101, could you try that?

[jansensan]

Ah interesting, sure I will try. So far we reverted properly to 0.5.0-alpha.6 (without the caret) and it worked. Let's try 0.5.0-alpha.8.

[larsgw]

Oh right, with the caret it will just install the latest version below 0.6.0, which would have been alpha 7.

[jansensan]

We upgraded to 0.5.0-alpha.9 (latest release so far) and it's still working as far as we can see.

[larsgw]

Great, I will close this for now then!