Vue-tables-2: React is not defined when using JSX on template

[cpgo]

• Vue.js version: 2.0.1
• consumed using: (browserify/webpack/rollup)
• Uncaught ReferenceError: React is not defined

<script>
export default {
    props: ['url', 'columns'],
    data() {
      return {
        options: {
          templates: {
            name(h, row) {
              return <a href='/users/id'>row.id</a>
            }
          }
        }
      }
    }
  }
</script>

If I return a simple string on the template it will be rendered, but if I use the jsx syntax I got the error

[matfish2]

This means jsx transform is not working properly.
Check your configuration.

[oblogic7]

I'm having this same issue. I was able to get jsx working with the solution in #2, but cannot figure out why this is not working. I've tried importing react into my project, I've installed the react preset and transform-react-jsx plugin for babel, but can't get it to work.

@cpgo Were you able to figure out what the issue is on your end?

@matfish2 Can you post a config sample that should work? Also, are jsx templates the only way to include row data in the template output?

[cpgo]

@oblogic7 spent the whole morning tinkering with my configs and couldnt get it to work
In the meantime I'm using a data table I made myself as a placeholder until I figure things out

[matfish2]

@oblogic7 After fulfilling the installation requirements of the jsx transpiler, I got it to work with both browserify and webpack using the following setup:

Browserify (+ Laravel Elixir):

elixir.ready(function() {
  elixir.config.js.browserify.transformers
      .find(transformer => transformer.name === 'babelify')
      .options.plugins = [
         'babel-plugin-transform-vue-jsx'
        ];
})

Webpack:

module: {
  loaders: [{ test: /\.jsx?$/, loader: 'babel' }]
}

@oblogic7 Yes, jsx is the only way to attach templates. This is one of the main reasons I used jsx to begin with. Unlike version 1 of the plugin, where I had to manually compile the HTML after every change to the table (provided the user has set compileTemplates to true), jsx allowed me to unite the user templates with the table on initial render, thus making them essentially part and parcel of the table template.

[oblogic7]

@matfish2 Thanks! I finally got it to work. What ended up working was adding import React from 'react'; to the Vue component where I was building the table.

I'm guessing that the issue was with scopes of Vue and components. I had imported React in my main app.js file, but the component did not pick that up. More learning to do I guess.

Thanks again for the help!

[oblogic7]

Ok... I spoke too soon. The console errors disappeared with the last change, but the template is not compiling correctly.

This works...

options: {
                    templates: {
                        name: function(h, row) {
                            console.log([h, row]);
                            return row.name;
                        }
                    }
                }

Changing to the code below does not work and results in blank output, so the JSX isn't being parsed or something, but no errors in the console or during gulp.

options: {
                    templates: {
                        name: function(h, row) {
                            console.log([h, row]);
                            return <div>{row.name}</div>;
                        }
                    }
                }

This is my first experience with JSX, so maybe I'm not doing something correctly?

[ndum]

Same issue like oblogic7 (I use your Browserify + Laravel Elixir config from above).
Please can u show us an example how this templates should be working.
If is an additional .jsx template file required? If you just add plain HTML in the Template Section
(like oblogic7 example above), the template will never be compiled and just ignored.
Thanks for your help.

[oblogic7]

@ndum As far as I understand JSX, while that looks like plain HTML, it is in fact valid JSX syntax. Notice that it is not a string as it is missing quotes. The fact that this does not throw any kind of error during build or at runtime reinforces my idea that the template itself is valid, but is not rendering properly with the suggested setup.

I have also wondered if the Vue component being inside of a .vue file is contributing to the issue since the config is simply trying to process JSX from .js or .jsx files.

[matfish2]

@oblogic7 if you are using webpack than you are definitely right. You need to modify the test regex to include .vue files

/(\.jsx?)|(\.vue)$/ should do the trick.

[oblogic7]

@matfish2 Tried that already, but results in the error below when building.

[matfish2]

Yeah. Come to think of it that's quite a pickle.
JSX and HTML are mutually exclusive.
E.g :data=jobs should be data={this.jobs} in jsx.
The only solution I can think of at the moment is to adapt the entire template to jsx syntax. Far from ideal, but I'm not sure if there is an alternative.

[oblogic7]

I will give that a shot. Thanks

[Lampone]

Having the same problem, thinking it has something to do with how elixir includes the vue-loader.

If you dont have to write a lot of html you can just use the normal render function (your currently using it if jsx-transformer is not working)
http://vuejs.org/guide/render-function.html

For example:

options: { 
    templates: {
        edit: function(createElement, row) {
            return createElement('a', {
                attrs:{
                    'href': row.id
                }
            }, 'Open');
        }
    }
}

Maybe it should be added to the documentation that it is not needed to use the jsx-transformer

[matfish2]

@oblogic7 on second thought, why don't you isolate the templates in their own jsx files and import them into your vue file?

[oblogic7]

Ended up using @Lampone 's suggestion. Works perfectly and is simpler than having a jsx file for each column.

[matfish2]

@Lampone, the docs don't state that one must use jsx to write the templates, only that it is recommended:

It is _recommended_ to use JSX, which closely resembles HTML, to write the templates.

At any rate, the jsx-transpiler is required because the plugin itself uses it.

[chrislandeza]

@Lampone - Using your suggestion, how do you attach event listener like @click="open(param)"