webpack fails at jsonld because of ES6 code in lib/jsonld.js

[flyon]

webpack fails at jsonld because of the use of "..." in jsonld/lib/jsonld.js which is not ES5.

https://github.com/digitalbazaar/jsonld.js/blob/master/lib/jsonld.js#L1040

ERROR in ./node_modules/jsonld/lib/jsonld.js
Module parse failed: Unexpected token (1040:2)
You may need an appropriate loader to handle this file type.
| function _setDefaults(options, {
|   documentLoader = jsonld.documentLoader,
|   ...defaults
| }) {
|   if(typeof options === 'function') {
 @ ./src/utils/JSONLD.ts 3:15-32
 @ ./src/index.ts
Warning:  Use --force to continue.

Aborted due to warnings.

[davidlehn]

What environment are you running in? I'm pretty sure there's more code that's not ES5. That's partly why the babeled dist/node6/ and webpacked dist/jsonld*.js exist. Can you just use those? The idea is that moving forward we will be using newer ES2015+ features (async/await usage is only a matter of time). If it's just one line that's causing trouble, then propose a patch to consider.

See also #251.

[flyon]

It's not entirely clear to me what node6 refers to and why I'd need to use it with webpack. But webpack is working now that I've switched to this (typescript) code:

 import * as jsonld from "jsonld/dist/node6/lib/jsonld";

[davidlehn]

The dist/node6/ code in the npm distributions is basically just the main code run through babel so that it works with node v6. That dir will go away sometime after v6 end-of-life.

[tpluscode]

I just got into the same problem but I cannot change the import as jsonld.js is a transitive dependency in my case.

It should definitely be possible to set up babel so that it bundles correctly. But how?

[tpluscode]

Ok, I managed to find a workaround setting up babel as follows:

I added these babel-* dependencies. Seems to only work with all installed

yarn add --save-dev
   babel-plugin-transform-runtime 
   babel-core babel-loader 
   babel-preset-stage-0
   babel-preset-env

.babelrcthe need to load the plugin installed above

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

webpack.config.js is tricky. My sources are in typescript so I added a loader rule specific to jsonld. Note that the include regex contains slashes to only match /jsonld/ and not other packages which may contain the word in their name.

module.exports = {
  module: {
    rules: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            include: [
                /\/jsonld\//
            ],
            query: {
                presets: [ 'env', 'stage-0' ]
            },
        }
    ]
  }

[davidemontanari]

Got the same issue here.
I found a solution using resolve.alias to point to the webpacked one: https://webpack.js.org/configuration/resolve/#resolve-alias

resolve: {
    alias: {
        jsonld$: path.resolve(root, './node_modules/jsonld/dist/jsonld.min.js')
      }
}

[flyon]

Thank @davidemontanari that solved my issue too. I had webpack working but was experiencing problems in browsers that do not support ES6, now they were tripping up over the spread syntax "...".
With the alias you suggested it works fine

[davidemontanari]

Great @flyon! Glad to help! :)

[sanstream]

@davidemontanari and @flyon thanks for figuring out this patch, but to me this does not feel like a proper solution to the problem. Perhaps exposing the minified version (/dist/jsonld.min.js) instead of index.js (lib/index.js) in package.json as the main entry point would solve this.

Would be happy to test it.

[ragboyjr]

For anyone experiencing this issue while using CRA, I upgraded from CRA 1.x to 2.x and the issue went away.

[tobiasschweizer]

I have just run into the same problem using the karma test framework:

25 07 2019 17:45:20.255:ERROR [source-reader.karma-typescript]: Error parsing code: Unexpected token (121:40)
in .../node_modules/jsonld/lib/jsonld.js
at line 121, column 40:

... function(input, ctx, options) {
  if(arguments.len ...

So do I understand correctly that jsonld/lib/jsonld.js is not ES5 compliant? What is it then, ES2015?

I am using version 1.6.2.

The following construct (#251) solves my problem:

declare let require: any; // http://stackoverflow.com/questions/34730010/angular2-5-minute-install-bug-require-is-not-defined
const jsonld = require('jsonld/dist/jsonld.js');

https://github.com/dhlab-basel/knora-api-js-lib/blob/e768292199cc59e1145f68d8611ed7e311f5cc82/src/api/v2/ontology/ontologies-endpoint.ts#L8-L9

However, I would also prefer a clean solution as stated in #251.

[tpluscode]

Line 121 it is async function(input, ctx, options) so the parsing problem is most likely that.

I just looked at my setup where I also test TS code with karma. Apparently I explicitly include jsonld in babel-loader:

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [
    /\/jsonld\//
  ],
  query: {
     presets: [ 'env', 'stage-0' ]
  },
}

[tpluscode]

And I replied the exact same snippet last year 🤦‍♂.

Have you seen it or tried it @tobiasschweizer ?