Optional chaining not working for 3.2.0-rc.1 [Webpack/Babel]

[blogolino]

 ERROR  Failed to compile with 1 error                                             11:10:19

 error  in ./node_modules/primevue/tabview/tabview.esm.js

Module parse failed: Unexpected token (52:29)
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
|         },
|         getKey(tab, i) {
>             return tab.props?.header ? tab.props.header : i;
|         },
|         isTabDisabled(tab) {

[plmercereau]

Same here with datatable.esm.js

[Arxk]

I had the same issue, and had to go back to 3.1.2. Looks like the same error was reported previously on #580 and #811.

[Yaroslaww-1]

You can also npm-install @babel/plugin-proposal-optional-chaining and add

{
  test: /\.m?jsx?$/,
  loader: 'babel-loader',
  options: {
    plugins: ["@babel/plugin-proposal-optional-chaining"]
  },
  include: /node_modules\/primevue/
}

to module.rules of your configureWebpack in vue.config.js:

configureWebpack: () => {
    return {
      ...other props
      module: {
        rules: [
          ...other custom rules
          {
            test: /\.m?jsx?$/,
            loader: 'babel-loader',
            options: {
              plugins: ["@babel/plugin-proposal-optional-chaining"]
            },
            include: /node_modules\/primevue/
          }
        ]
      }
    };
  },

I think It is not the best solution, but it works.

[scottix]

Looks like its a vue-loader issue vuejs/vue-loader#1697 (comment)

[MonaLizaOverdrivee]

Still relevant problem

[peter-mghendi]

You can also npm-install @babel/plugin-proposal-optional-chaining and add

{
  test: /\.m?jsx?$/,
  loader: 'babel-loader',
  options: {
    plugins: ["@babel/plugin-proposal-optional-chaining"]
  },
  include: /node_modules\/primevue/
}

to module.rules of your configureWebpack in vue.config.js:

configureWebpack: () => {
    return {
      ...other props
      module: {
        rules: [
          ...other custom rules
          {
            test: /\.m?jsx?$/,
            loader: 'babel-loader',
            options: {
              plugins: ["@babel/plugin-proposal-optional-chaining"]
            },
            include: /node_modules\/primevue/
          }
        ]
      }
    };
  },

I think It is not the best solution, but it works.

@Yaroslaww-1 this is the entirety of my vue.config.js yet I still can't get it working.

module.exports = {
  configureWebpack: () => {
    return {
      module: {
        rules: [
          {
            test: /\.m?jsx?$/,
            loader: "babel-loader",
            options: {
              plugins: ["@babel/plugin-proposal-optional-chaining"],
            },
            include: /node_modules\/primevue/,
          },
        ],
      },
    };
  },
};

[Yaroslaww-1]

@sixpeteunder Have you created your app via vue cli 3?

[peter-mghendi]

@Yaroslaww-1 Vue 3 app created with Vue CLI 4.5.

I just downgraded to Primevue 3.1.2 and now everything is working.

[tshan007]

./node_modules/primevue/tabview/tabview.esm.js 52:29
Module parse failed: Unexpected token (52:29)
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
},
getKey(tab, i) {
return tab.props?.header ? tab.props.header : i;
},
isTabDisabled(tab) {

Any solution. downgrade is causing different problems :(

[cagataycivici]

Should be fixed with #913, we plan to release 3.2.0-final tomorrow.