TypeError: console.Console is not a constructor

[jbonevich]

Not sure if this is Stupid User Error, a bug in citation-js, or a bug in one of its dependencies, but when I use citation-js in a React app from the browser, I get the error 'TypeError: console.Console is not a constructor' at node_modules/citation-js/lib/logger.js:10.

My code:

import React, {Component} from "react";
import Cite from 'citation-js';

class Source extends Component {
  render() {
    const citation = '@book{fake2018\n author="Me Johnson"\n title="Big Book of Bytes"\n publisher="Harper"\n year=2018\n}';
    const data = new Cite(citation);
    return (
      <div>{data.format('citation-chicago')}</div>
    )
  }
}

(Note: I do not know if citation-chicago is an actual format, but appear to not get that far in processing anyway). Anything I am missing?

[larsgw]

I'm using a Node-only API there, but there's a browser-fallback too, which doesn't seem to get used for some reason. How do you run the code in the browser? Browserify should pick it up, but webpack might not...

---

As for citation-chicago, no, that won't work either. The equivalent of that in the new API (Cite#format) would be

data.format('bibliography', {template: 'chicago'})

Apart from that, the chicago template isn't added by default, as only apa, vancouver and harvard1 are. You'd have add it yourself:

Cite.CSL.register.addTemplate('chicago', xml)

The xml is available here: https://github.com/citation-style-language/styles

[jbonevich]

I am running a React app via npm with react-scripts, which uses webpack. I installed citation-js via npm, but did nothing else special (I do note the "Browser releases" in the instructions, but am unclear if that applies in this situation).

And thanks for the info on chicago style!

[larsgw]

No, if you want to use webpack, those instructions don't really apply. I can fix this particular issue (sometime soon, not right now), but webpack might have other problems, for example with babel config. I'll have to see about that later. Perhaps distributing a browser file, with or without dependencies, on npm would work.

[larsgw]

I published v0.4.0-5, which should fix this particular error, but you might still get other ones – I'm not entirely familiar with webpack and how it interacts with (browserify-based) config. If you do get errors, please do let me know.