Module parse failed when using Riot with Webpack, and Babel for es2015

Question

I have a project that is using ES2015 for the code, and also using Riot.
(The Riot components, however, do not need to be in ES2015, just old JS)
I am also using Webpack to build the project.

The problem I am getting is :

"ERROR in ./src/test-tag.tag
Module parse failed: .../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}!.../test-tag.tag Unexpected token (5:18) You may need an appropriate loader to handle this file type."

It is complaining because of the way riot component script code looks, ie. a function must have just this for it's declaration functionName() { /* the code */ } , ie. there is no keyword function.

Here is my full project

app.js

import 'riot';

import 'test-tag.tag';

riot.mount("*");

test-tag.tag

<test-tag>

    <h1>This is my test tag</h1>
    <button onclick{ click_action }>Click Me</button>

    <script>
         //click_action() { alert('clicked!'); }
    </script>

</test-tag>

index.html

<html>
<head></head>
<body>

    <test-tag></test-tag>
    <script src="app_bundle.js"></script>

</body>
</html>

package.json

{
  "name": "riot_and_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015-riot": "^1.1.0",
    "riot": "^2.5.0",
    "riotjs-loader": "^3.0.0",
    "tag": "^0.3.0",
    "tag-loader": "^0.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var webpack = require('webpack');

const path = require('path');
const PATHS = {
    src: path.join(__dirname + '/src'),
    dist: path.join(__dirname + '/build'),
};



module.exports = {
    entry: [path.join(PATHS.src, '/app.js')],

    resolve: {
        modulesDirectories: ['node_modules', '.'], 
        extension: [ '.js' ] 
    },

    output: {
        path: PATHS.dist,
        filename: 'app_bundle.js'
    },


    plugins: [
        new webpack.ProvidePlugin({
          riot: 'riot'
        })
    ],


    module: {

        preLoaders: [
          { test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } }
        ],

        loaders: [

            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              loader: 'babel', 
              query: {
                presets: ['es2015']
              }
            },

            { test: /\.tag$/, loader: 'tag' },
        ]
    }

};

Now - that will all work as expected, except that clicking the button does nothing because that code is commented out.
If the click_action line in test-tag.tag is uncommented, then $ webpack results in the error quoted at the top of this (horribly huge) question.

Is there any way I can get webpack to accept the standard riot code?
OR
Is there a different way I can define riot internal functions in a way that webpack will not complain about?

Did you ever solve this. I am trying to get riot generated code to work with webpack but can't get it done. Keep having warnings and errors in webpack generated code. — HMR, Feb 11 '17 at 03:51
I'm afraid not. I did that project with the riot components only using an earlier version of JS. I would recommend avoiding that approach though, even if getting it to work correctly has a really great time cost. — kris, Feb 12 '17 at 19:15
Thank you for your reply Kris, I found a blog somewhere that skipped the riot compiler and just generate the script. ES2015 allows multi line strings with ticks so the html template is easy enough to incorporate in your script. http://blog.srackham.com/posts/riot-es6-webpack-apps/ I'm trying the same strategy. — HMR, Feb 13 '17 at 03:00

score 0 · Answer 1 · answered Sep 21 '16 at 13:05

Have in mind that the "ES6 like" method syntax is something added by Riot, is not standard ES6.

This will be the standard js syntax

this.click_action = function() {
  alert('clicked!')
}

And this the es6 syntax

this.click_action = () => {
  alert('clicked!')
}

Also you have a typo in your button definition, it will be like this

<button onclick={click_action}>Click Me</button>

Module parse failed when using Riot with Webpack, and Babel for es2015

Here is my full project

1 Answers1