webpack js compiler issues with spread syntax from npm package

Question

I have the following class:

class AnalyticsService {
  /** Log an analytics event. */
  log(options) {
    return Promise.all(this.logGoogleAnalytics(options), this.logKenticoAnalytics(options));
  }

  /** Log an analytics event to GA. */
  logGoogleAnalytics(options) {
    if (!options || !window.ga) {
      console.warn('Analytics: Failed to log event:', options);
      return Promise.reject(false);
    }
    const { category, action, label, value } = options;
    ga('send', 'event', category, action, label, value);
    return Promise.resolve(true);
  }

  /** Log an analytics event to Kentico. */
  logKenticoAnalytics(options) {
    if (!options || !window.ga) {
      console.warn('Analytics: Failed to log activity:', options);
      return Promise.reject(false);
    }

    const data = {
      ...options,
      referrer: options.referrer || document.referrer,
      url: options.url || location.href,
    };

    return postJSON(`${URL_VIRTUAL_PATH}/activities`, data).then(
      response => {
        if (!response.ok) {
          console.warn('Analytics: Failed to log activity:', response, options);
          return Promise.reject(false);
        }
        return response.json();
      },
      error => {
        console.warn('Analytics: Failed to log activity:', error, options);
        return Promise.reject(false);
      },
    );
  }
}

Which if I include in another js file with

import AnalyticsService from './AnalyticsService';

Will compile and work well. However we are trying to get reuse out of our js by exporting it to npm so we can npm it into different projects.

This has all worked well but now if I use

import AnalyticsService from '@jsrepo/analyticsservice/AnalyticsService';

I get a compile error for the spread syntax:

ERROR in ./~/@jsrepo/analyticsservice/AnalyticsService.js
Module parse failed: C:\Web\SiteFiles\src\node_modules\@jsrepo\analyticsservice\AnalyticsService.js Unexpected token (30:6)
You may need an appropriate loader to handle this file type.
|
|     const data = {
|       ...options,
|       referrer: options.referrer || document.referrer,
|       url: options.url || location.href,
 @ ./js/components/init-analytics.js 7:24-79
 @ ./js/components/index.js
 @ ./js/main.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?reload=true sass/main.scss js/main

I thought it may be a dependency issue, so I have added

"babel-plugin-transform-object-rest-spread": "^6.23.0"

to the dependencies of the npm package and also added it to the options of the babel loader in webpack config:

    use: {
      // Use the babel-loader to transpile the JS to browser-compatible syntax.
      loader: 'babel-loader',
      options: {
        plugins: [require('babel-plugin-transform-object-rest-spread')]
        // have also tried adding babel-plugin-transform-es2015-spread
      }
    },

But I am unable to remove the error. Does anyone know how to get the spread syntax to work when importing an npm package or how to edit it so I don't need it - mainly I don't understand this line:

const { category, action, label, value } = options;

in order to assign whatever options is to the data without using the ...

score 0 · Accepted Answer · answered Oct 04 '18 at 12:04

Figured out that

const { category, action, label, value } = options;

Was called object deconstructing. From that I was able to determine what was in the options so just added those to the data var separately in order to get rid of the ...:

const data = {
  category: options.category,
  action: options.action,
  label: options.label,
  value: options.value,
  referrer: options.referrer || document.referrer,
  url: options.url || location.href,
};

If anyone can answer how to get the js loader to work properly, then I will not accept this answer and will accept theirs as it would be better to use the shorthand

webpack js compiler issues with spread syntax from npm package

1 Answers1