Log in to start a topic

Issue with beta and Vue

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

  • richard

    • Post Options:
    • Link
      Copy

    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 https://webpack.js.org/concepts#loaders
> 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';

  • sergey.abakumov

    Posted 29 September 2021, 8:25 pm EST

    Hello,

    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?

  • richard

    Posted 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.

  • richard

    Posted 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.

  • richard

    Posted 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

    vue@2.6.14

    @vue/composition-api@1.2.2

    webpack@4.46.0

    @vue/cli-service@4.5.13

    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.

  • sergey.abakumov

    Posted 3 October 2021, 9:40 pm EST

    Hello,

    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.

    arjsbeta-vue2-app.zip

  • richard

    Posted 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.

  • sergey.abakumov

    Posted 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.

  • richard

    Posted 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'

  • richard

    Posted 4 October 2021, 3:48 am EST

    Great news, Thanks!

  • sergey.abakumov

    Posted 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.

  • richard

    Posted 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.

    @grapecity/activereports-vue@2.2.0-beta.116

    @grapecity/activereports@2.2.0-beta.344

  • sergey.abakumov

    Posted 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.

  • richard

    Posted 5 October 2021, 12:41 am EST

    No worries. I will pick it up then. Thanks!

  • sergey.abakumov

    Posted 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

  • ali.raza

    Posted 12 July 2023, 5:18 pm EST

    I have the same issue importing Core and export document in Nest Js, can you please specify if i need to do any changes on my backend?

    I suppose since you have Node support, it should also work on Nest JS, but without Babel?

  • akshay.rajput

    Posted 13 July 2023, 11:28 pm EST

    Hi Ali,

    As far as I know, the import statement won’t work without babel. I would suggest you to try using the require() method.

    If the issue persists then please share a sample application reproducing the issue so we can test this issue at our end and get back to you accordingly.

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.