Primevue 2.4 TabView and Accordeon throw errow on npm build

[zsuzsmuzs]

SyntaxError: primevue\tabview\TabView.vue: Unexpected token (67:12)

  65 |     render() {
  66 |         return (
> 67 |             <div class="p-tabview p-component">
     |             ^
  68 |                 {this.$slots.default}
  69 |                 <ul ref="nav" class="p-tabview-nav" role="tablist">
  70 |                     {

[tugcekucukoglu]

Please try again adding babel.config.js

module.exports = {
    presets: ["@vue/app"]
};

[zsuzsmuzs]

Thanks, for the suggestion, however it did not solve the issue.

I am using Laravel Mix and tried a few things and I got a new error now: File was processed with these loaders: ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders.

2.3.0 is working fine...

[bdbusch]

I get the same problem. Added the preset didn't help.

    '@vue/cli-plugin-babel/preset',

was already in the array - either adding the @vue/app or only providing @vue/app didn't help.

reverting back.

[M-erb]

Same issues with 2.4.0 using the Accordion component. Reverting to 2.3.0 is the only thing that fixed the issue

[zsuzsmuzs]

I finally managed to get it working. However both the Accordion and the TabView components are very bug-ridden. I already spent hours to get my code working in v2.4. but I fear I have to revert to 2.3.0 again. :( Not happy atm...

[balance80]

I finally managed to get it working. However both the Accordion and the TabView components are very bug-ridden. I already spent hours to get my code working in v2.4. but I fear I have to revert to 2.3.0 again. :( Not happy atm...

Exact same problem here, I had to revert back to 2.3.0 where everything is working as expected.

[juanparati]

I also experiencing the same issue. It seems that TabView v2.4 was written using the Vue 3.x style.

The following error is received:

Module parse failed: Unexpected token (67:12)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     render() {
|         return (
>             <div class="p-tabview p-component">
|                 {this.$slots.default}
|                 <ul ref="nav" class="p-tabview-nav" role="tablist">
 @ ./node_modules/primevue/tabview/TabView.vue?vue&type=script&lang=js& 1:0-109 1:125-128 1:130-236 1:130-236
 @ ./node_modules/primevue/tabview/TabView.vue

I am using Laravel-mix.

[zsuzsmuzs]

It is possible to get it working with Laravel-mix. Just add the following lines in the webpack.mix.js

 mix.webpackConfig({module: {
      rules: [{
        test: /\.js?$/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ["@vue/app"]
          }
        }]
      }]
    }})

Maybe I had to install this package as well, but not sure about it: @vue/babel-preset-app

However with the v2.4 there were major issues with vuejs reactivity. Components which are reactive with 2.3 are not with 2.4 anymore. :( I hope there will be a solution soon.

[cagataycivici]

I've also faced with this when working on the 2.x. branch, we'll work on it and release 2.4.2 this week.

[tugcekucukoglu]

I cloned primevue-quickstart and created this repo. I didn't get any error. How can I replicate the issue? What should I change?