Requires a patch for use with Create React App

[thclark]

Problem

The example, which gives:

const style = require('raw!./my-csl-style.csl');
const locale = require('raw!./my-xml-locale.xml');

Which doesn't work with ES6 and Create-React-App:

Failed to compile.

./src/components/Fields/ReferenceField/index.jsx
  Line 17:  Unexpected '!' in 'raw!./my-csl-style.csl'. Do not use import syntax to configure webpack loaders   import/no-webpack-loader-syntax
  Line 18:  Unexpected '!' in 'raw!./my-xml-locale.xml'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

Cause

The issue is rooted in CRA's webpack config, which defines a URL loader by default (for files other than .js, .css extensions). There is a proposal out with the CRA team to fix this (currently still open, as I write)

Workaround

The style and locale xml need to be loaded as strings and passed to the Bibliography component. This could be done with a fetch() to get their contents from a url. Instead, I've chosen to use the raw.macro library to embed the strings into my bundle, at build time, using babel.

Here's what I do:

npm install --save raw.macro

And at the top of my file (with the relevant style files in my assets directory):

import raw from 'raw.macro'
const style = raw('assets/csl/apa-style.csl')
const locale = raw('assets/csl/xml-locale.xml')

Hope this helps!

[robindemourat]

Hello, thank you for the feedback ! just updated the README examples with your method which is indeed more compatible with CRA usage (8b43e49)