Nuxt.js: How to use JSX from vue plugin?

[smb043]

Hello. I'm trying to use vue-tables-2 plugin, it uses JSX in your own templates.

_packages.json_

{
  //...
  "dependencies": {
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.3.0",
    "nuxt": "latest",
    "vue-tables-2": "^0.2.77"
  },
  //...
}

_nuxt.config.js_

module.exports = {
  build: {
    vendor: ['vue-tables-2'],
    babel: {
      plugins: ['transform-vue-jsx']
    }
  },
  plugins: ['~plugins/vue-tables-2'],
  //...
}

_plugins/vue-tables-2.js_

import Vue from 'vue'
import VueTables from 'vue-tables-2'

Vue.use(VueTables.server, {}, true)

But I get the following error:

ERROR in ./~/vue-tables-2/lib/template.jsx
Module parse failed: app_root/node_modules/vue-tables-2/lib/template.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.

Please tell me what am I doing wrong?

_{This question is available on Nuxt.js community (#c111)}

[Chathula]

try adding this to webpack config(nuxt config)

loaders: [
    {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
    },
]

[smb043]

Thanks @Chathula, but the problem persists...

[egoist]

I think vue-tables-2 should precompile itself after all 🤔

[Atinux]

Indeed, this is mostly an issue of vue-tables-2. Could you create an issue on their repo @smb043?

[smb043]

Yes, I will create. Thank you.

[jayarc]

@smb043 If you found a solution can you post here and in the other issue please? I imagine more people than me will be looking for this fix.

[smb043]

@jayarc Sorry to look for a solution didn't have time.. Continued use just vue.js, not nuxt.js..

[ArStah]

Hi, i had the same issue, and solved it by adding this to nuxt.config.js

build: {
    extend(config) {
      config.module.rules.push({
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          babelrc: false,
          cacheDirectory: true,
          presets: ['stage-2'],
          plugins: ['transform-vue-jsx']
        }
      });
    }
  }

[Atinux]

@clarkdo Could you take take a look at @ArStah solution please?

[clarkdo]

It looks good, many thanks to @ArStah.
Currently we are using babel-preset-vue-app which has included babel-preset-vue-app, but we didn't include the .jsx extension, I can make a change.

[ArStah]

@clarkdo so after this update will be applied, .jsx files can be imported out of the box, without adding babel-plugin-syntax-jsx and babel-plugin-transform-vue-jsx to dependencies and extending webpack config?

[clarkdo]

Yes:)

[ArStah]

Nice)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.