Doesn't work anymore: Unexpected identifier

[PedroD]

This happens when I try to add it as a plugin in NuxtJS.

I have tried different combinations of ways to import the component, all with the same error message.

How to reproduce:
Start a new Nuxt project and include this component as a plugin.

[ravitez]

Hi @PedroD
Have you figured out any workaround for this ?
I have also encountered this on my nuxt project.

Very helpful if you can share in case you figured out an alternative approach.

[ravitez]

I got it working by adding process.client while importing in the plugin...

From my ~/plugins/vue-pivottable.js from nuxt

import Vue from 'vue'


if (process.client) {

  const {VuePivottable,VuePivottableUi} = require('vue-pivottable')

  console.log('inside vue-pivottable plugin')
  Vue.component(VuePivottable.name,VuePivottable);
  Vue.component(VuePivottableUi.name,VuePivottableUi)
}

[PedroD]

Hi.

I ended up creating my own component out of it instead of using this one. It was a very tricky and strange experience:

<template lang="pug">
#pivot-table
</template>

<style lang="stylus" scoped></style>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
    rows: {
      type: Array,
      required: false,
      default: () => undefined,
    },
    cols: {
      type: Array,
      required: false,
      default: () => undefined,
    },
    vals: {
      type: Array,
      required: false,
      default: () => undefined,
    },
    aggregatorName: {
      type: String,
      required: false,
      default: () => 'Sum',
    },
    rendererName: {
      type: String,
      required: false,
      default: () => 'Table',
    },
  },
  mounted() {
    const configs = {
      rows: this.rows,
      cols: this.cols,
      vals: this.vals,
      aggregatorName: this.aggregatorName,
      rendererName: this.rendererName,
      renderers: $.extend(
        $.pivotUtilities.renderers,
        $.pivotUtilities.plotly_renderers,
        $.pivotUtilities.export_renderers
      ),
    }

    $('#pivot-table').pivotUI(this.data, configs)
  },
  methods: {},
}
</script>

To make this work you need to include the following (in Nuxt this should be in the plugins folder):

import 'jquery-ui-dist/jquery-ui.min'
import 'pivottable'
import 'pivottable/dist/plotly_renderers'
import 'pivottable/dist/export_renderers'
import 'pivottable/dist/c3_renderers'
import 'pivottable/dist/pivot.min.css'

In the nuxt.config:

(...)
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    { src: '@/plugins/pivottable', mode: 'client' }
  ],
(...)

Then just add these dependencies to your package.json:
"pivottable": "^2.23.0"
"plotly.js": "^1.53.0"
"c3": "^0.7.15"
"jquery": "^3.4.1"
"jquery-ui-dist": "^1.12.1"

[ravitez]

Thanks for sharing .