Issue with beta and Vue

Posted by: richard on 29 September 2021, 8:24 am EST

  • Posted 29 September 2021, 8:24 am EST

    I am currently using the regular version of the Vue component in my dev environment and wanted to try out the beta but ran into an issue when trying to run the build with the beta version.

    The only change I made was to run "npm install @grapecity/activereports-vue@beta" to pick up the newer version of the component. Are there any additional dependencies or changes needed for the beta version?

    I got the following error when I ran "npm run serve".

    ERROR  Failed to compile with 1 error                                                                                                                                                                   5:07:46 PM

    error in ./node_modules/@grapecity/activereports/lib/index.js

    Module parse failed: Unexpected token (1:9)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
    > export * as Core from './node_modules/@grapecity/ar-js-pagereport';
    | export * as ReportViewer from './node_modules/@grapecity/ar-js-viewer';
    | export * as ReportDesigner from './node_modules/@grapecity/ar-js-designer';
  • Replied 29 September 2021, 8:25 pm EST

    I just tested ARJS with Vue3 app and it works fine.
    The version of @grapecity/activereports-vue is 2.2.0-beta.116
    Could you try removing the node_modules folder of the app and then re-install all the packages using the npm install or yarn command?
  • Replied 30 September 2021, 12:48 am EST

    I did try removing node_modules and still had the issue. My app is still using Vue2 with the composition api if that matters.

    I was able to get it to work by adding @grapecity/activereports to transpileDependencies in my vue.config.js but this makes the build take a LOT longer. I'm currently using node 10.24 and assuming I need to upgrade to avoid the need for babel.
  • Replied 30 September 2021, 3:03 am EST

    I believe an upgrade to the latest LTS node version will resolve this without using babel. Will post an update when I've had a chance to test that.
  • Replied 1 October 2021, 4:12 am EST

    I'm still seeing the issue with node 14 without using babel to transpile. Any ideas?

    I'm using

    I don't have any additional loaders in my vue.config.js other than a json-loader to be able to import the rdlx-json report files.
  • Replied 3 October 2021, 9:40 pm EST

    I attached a minimalistic sample of Vue2+ARJSbeta application that works fine on my end. I am not sure if upgrading to the recent nodejs version would remove babel dependency.
  • Replied 4 October 2021, 2:37 am EST

    So that did help narrow down the issue but I am still seeing it. If I only import the Viewer component from @grapecity/activereports-vue it works fine but if I try to also import the PdfExport component from @grapecity/activereports that is when I see the error described above.

    If I add this import to the example that you sent over I see the same error.
    // eslint-disable-next-line no-unused-vars
    import { PdfExport } from '@grapecity/activereports'

    Currently in my proof of concept I just have the import there so that the export options are enabled in the viewer which is why I have the eslint rule disabled since I don't actually use the imported object in my code. The options didn't show up in the viewer until I imported at least one of the export objects which matched what I saw in the docs.

    ActiveReportsJS Report Viewer component for Vue automatically enables Export Sidebar if the code imports any type from the @grapecity/activereports package. 

  • Replied 4 October 2021, 2:46 am EST

    Thanks, I was able to reproduce the problem and sent it to the development team. We should be able to fix it for the public release this week.
  • Replied 4 October 2021, 2:48 am EST

    If I change the import to the following it works as well. I'm not sure if this recommended since it bypasses the main library export but is my best solution without transpiling the whole library for now.

    // eslint-disable-next-line no-unused-vars
    import { PdfExport } from '@grapecity/activereports/pdfexport'
  • Replied 4 October 2021, 3:48 am EST

    sergey.abakumov said:
    Thanks, I was able to reproduce the problem and sent it to the development team. We should be able to fix it for the public release this week.

    Great news, Thanks!
  • Replied 4 October 2021, 4:46 am EST

    seems like they fixed it. Could you remove and then re-add the @grapecity/activereports-vue package into the app and check if the issues disappeared? it did on my end. The @grapecity/activereports-vue version stays the same, but the @grapecity/activereports was updated.
  • Replied 4 October 2021, 5:02 am EST

    I still see the issue after removing and re-adding @grapecity/activereports-vue but I didn't see a version change in @grapecity/activereports either.

    I see these versions both before and after from npm ls where just activereports-vue is in my package.json.
  • Replied 4 October 2021, 8:31 pm EST

    Sorry, the updated version of @grapecity/activereports@beta is available through the internal npm only for now. The public release is scheduled for tomorrow.
  • Replied 5 October 2021, 12:41 am EST

    No worries. I will pick it up then. Thanks!
  • Marked as Answer

    Replied 5 October 2021, 7:47 pm EST

    okay, v2.2 is available publicly now.
    Note that both @grapecity/activereports @grapecity/activereports-vue should be removed and then @grapecity/activereports-vue re-added to ensure that both packages are updated
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels