.jsx compiling error in laravel-mix

[VitruxPT]

• Vue.js version: 2.1.10

• consumed using: webpack in Laravel-mix

• FULL error message (including stack trace):

`ERROR Failed to compile with 3 errors

error in ./~/vue-tables-2/lib/template.jsx

Module parse failed: C:\Domains\web\node_modules\vue-table s-2\lib\template.jsx Unexpected token (15:7) You may need an appropriate loader to handle this file type.	var perPage = require('./template/per-page.jsx')(h, this);
return <div class={"VueTables VueTables--" + this.source}>

@ ./~/vue-tables-2/lib/v-server-table.js 10:15-40 @ ./~/vue-tables-2/index.js @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

error in ./~/vue-tables-2/lib/methods/render.js

Module parse failed: C:\Domains\web\node_modules\vue-table s-2\lib\methods\render.js Unexpected token (17:9) You may need an appropriate loader to handle this file type.	});
return {template}
}

@ ./~/vue-tables-2/lib/mixins/methods.js 27:14-42 @ ./~/vue-tables-2/lib/table.js @ ./~/vue-tables-2/lib/v-server-table.js @ ./~/vue-tables-2/index.js @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

error in ./~/vue-pagination-2/src/template.jsx

Module parse failed: C:\Domains\web\node_modules\vue-pagin ation-2\src\template.jsx Unexpected token (8:8) You may need an appropriate loader to handle this file type. | this.pages.map(function(page) { | items.push( | <li class={"VuePagination__pagination-item page-item "+this.activeClas s(page)}> | <a class="page-link" href="javascript:void(0);" | on-click={this.setPage.bind(this, page)}>{page}

@ ./~/vue-pagination-2/src/Pagination.js 1:15-40 @ ./~/vue-pagination-2/index.js @ ./~/vue-tables-2/lib/v-server-table.js @ ./~/vue-tables-2/index.js @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss`

• relevant code: Using import {ServerTable, ClientTable, Event} from 'vue-tables-2'; in my app.js

• my package.json:

{ "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules", "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules", "hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot", "production": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "devDependencies": { "axios": "^0.15.3", "babel": "^6.5.2", "babel-cli": "^6.22.2", "babel-helper-vue-jsx-merge-props": "^2.0.2", "babel-loader": "^6.2.10", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vue-jsx": "^3.3.0", "babel-preset-es2015": "^6.22.0", "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-14", "laravel-elixir-vue-2": "^0.2.0", "laravel-elixir-webpack-official": "^1.0.2", "laravel-mix": "^0.7.2", "lodash": "^4.16.2", "vue": "^2.0.1", "vue-resource": "^1.0.3", "vue-strap": "github:wffranco/vue-strap.git", "vue-tables-2": "^0.3.1" }, "babel": { "presets": [ "es2015" ], "plugins": [ "transform-vue-jsx" ] } }

• My .babelrc file:

{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"] }

• My webpack.config.js file:

`module.exports.module = { rules: [ { test: /.vue$/, loader: 'vue-loader', options: { loaders: { js: 'babel-loader' + Mix.babelConfig(), scss: 'vue-style-loader!css-loader!sass-loader', sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' },

            postcss: [
                require('autoprefixer')
            ]
        }
    },

    {
        test: /\.jsx$/,
        exclude: /(node_modules(?!\/(vue-tables-2|vue-pagination-2))|bower_components)/,
        loader: 'babel-loader' + Mix.babelConfig()
    },

    {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
    },

    {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
            name: 'images/[name].[ext]?[hash]',
            publicPath: '/'
        }
    },

    {
        test: /\.(woff2?|ttf|eot|svg|otf)$/,
        loader: 'file-loader',
        options: {
            name: 'fonts/[name].[ext]?[hash]',
            publicPath: '/'
        }
    }
]

};

`

• Notes: Yes, i've searched for similar issues here and tried everything suggested, included but not limited to:

-- Change my webpack.config.js file with the specified "excluded" /node_modules(?!\/(vue-tables-2|vue-pagination-2))/ and "test"; -- Including the .babelrc config in the webpack.config.js in the "query" parameter; -- Changing the loader parameter to include the config in the string as a query.

• steps for reproducing the issue: npm run dev

Let me know If any other file is required. Thanks in advance.

[brandonferens]

I am having this same issue as well.

[brandonferens]

Well, that's annoying. I was wanting to use this over vuetable-2. Guess I won't be doing that.

[VitruxPT]

@brandonferens Same, i've been using the v1 but i guess i won't be using it anymore. Don't want to sound rude, but I was expecting some help, not an issue policy saying the same as "we don't care anymore". Oh well, nothing we can do now.

[matfish2]

@VitruxPT. I've put countless hours into creating and maintaining this package. I do my best to solve bugs and implement feature requests ASAP. All for free. However, I don't think that it is my role to solve compilations issues. Do you honestly expect me to download laravel-mix and start experimenting myself until I find the correct configuration? There are many forums that can help you with that.

I chose to use JSX because of the flexibility it gave me in terms of injecting user defined HTML (in templates, child rows etc.) without having to manually compile it (like I did on v1). In hindsight, knowing how cumbersome it is to install I might have gone another way.

As I said in the policy I am open to constructive ideas how to make the process easier. Otherwise, I don't appreciate ungrateful and rude comments. Sometimes silence is better.

[brandonferens]

@matfish2 I understand all that, and thank you for putting in the time you have on this project. I apologize for my part in that rudeness.

If you aren't opposed to it, I will work on seeing if I can get it working better with Laravel Mix. Perhaps I just overlooked it's mergeConfig() and how it functions. If I get it working, I can post a PR for the docs with how to include it using Mix.

[matfish2]

Apology accepted. a PR is always welcome.

[VitruxPT]

@matfish2 @brandonferens I just found something, when I remove the exclude parameter from the webpack.config.js file everything compiles with no errors.

So at first i thought it was a problem with the regex /(node_modules(?!\/(vue-tables-2|vue-pagination-2))|bower_components)/ but when i went to test the regex myself I noticed that there's no problem with it, so i don't really know why it's not including the vue-tables folder. For now I'll just have to remove the exclude parameter until I find a better way to deal with it.

Note: I had to include js files to the test parameter like so: test: /\.(js|jsx)$/ or it would throw an error about render.js

[bubjavier]

in my case, looks like I needed to install babel-preset-react and add it to webpack's babel preset. here's my webpack.mix.js config that solved my build issue like this, just thought it could help.

const { mix } = require('laravel-mix');

mix
  .webpackConfig({
    module : {
      rules: {
        test: /\.jsx?$/,
        loader: 'babel-loader' + mix.config.babelConfig(),
        exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/,
        query: {
          presets: [
            "es2015",
            "react"
          ]
        }
      }
    }
  })
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

[hong304]

I also can't minified vue-table-2. I really appreciated the author, but please launch a good version , just waste a lots people's time

[matfish2]

@hong304, See my response to #34. Other than that I've precompiled everything in the change I made 10 days ago.