Error (@tryghost/content-api/lib/index) Expected identifier on IE 11

[rsarai]

Issue Summary

I'm having the following error: Error?(@tryghost/content-api/lib/index) error Expected identifieron IE 11, when using the content api. I see that the lib is very well maintained so I'm opening this issue.

To Reproduce

1. Install @tryghost/content-api
2. Import on your project import GhostContentAPI from '@tryghost/content-api';
3. Use IE 11

Any other info e.g. Why do you consider this to be a bug? What did you expect to happen instead?

Technical details:

• Ghost Version: 2.16.1
• Node Version: v10.13.0
• Browser/OS: IE 11
• Database: MySql

[kevinansfield]

Import on your project import GhostContentAPI from '@tryghost/content-api';

How are you doing the import and resulting transpilation? The ES module version of the library is written with ES6 so it's expected that it will be transpiled with babel etc to work with your chosen browser/environment targets.

[rsarai]

@kevinansfield Thanks for the prompt response!

Answering your question I have a react application using webpack and babel.

One other thing I realized was that on my node_modules I have this folder:

The content-api.js and the content-api.min.js are not being transpiled to es5. Do you have any insights that can help me?

[rsarai]

Yep, the code is not being transpiled to es5, I believe this has to do with this issue: rollup/rollup-plugin-babel#260

I solve the problem for now by adding exclude: [/node_modules\/(?!(@tryghost)\/).*/], to my webpack config file.

baseConfig[0].module.rules.push({
  test: /\.jsx?$/,
  exclude: [/node_modules\/(?!(@tryghost)\/).*/],
  loaders: ['babel-loader'],
}

Please consider this on the next release. Let me know what you think and I will make a PR 😉

[kevinansfield]

The content-api.js and the content-api.min.js are not being transpiled to es5.

cjs/content-api.js should not be transpiled to es5 as it's a node.js build.

umd/content-api.min.js should definitely be transpiled and have polyfills bundled as that is intended as a standalone browser build for use with <script src="https://unpkg.com/@tryghost/content-api@1.0.0/umd/content-api.min.js">. Thanks for pointing out the bug!

If you're pulling this module into a webpack build it will actually look at the module value in package.json and then use the lib/index.js code which is the source code. It was my assumption that webpack would automatically transpile that code based on your app's configured targets but it appears I was too optimistic about the current state of various bundler environments 😞

I've updated our rollup config across our isomorphic packages so that we generate an es/{package}.js file as the "module" build that webpack will use. This build will include transpilation back to the default browser support of @babel/preset-env as well as inclusion of any necessary polyfills. Unfortunately this will result in larger builds but I can't see a way around that, if a module consumer really wants to shave off some bytes it will be up to them to reference the lib/* files with appropriate transpilation in their build config.

Please try upgrading to the new 1.2.0 version and let me know how it goes 😄

[rsarai]

Thanks @kevinansfield, it worked!