Error when I declare a ajax function

Question

I am using webpack to build my project but the problem is when I declare a ajax call function like below:

<script>
    var self = this;

    login(){
        $.ajax({
            url: '/feedback',
            type: 'POST',
            data: params,
            success: function(res){
                if(res == 'OK'){
                    alert("Received your message. We shall get back to your shortly.");
                }
            },
            error: function(err){
                console.log('error: ', err);
            };
        })
    }
</script>

I get error:

ERROR in ./public_html/tags/login_tag.tag
Module parse failed: E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\riotjs-loader\index.js?{}!E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\public_html\tags\login_tag.tag Unexpected token (16:17)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (16:17)
    at Parser.pp$4.raise (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp.expect (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:597:28)
    at Parser.pp$3.parseObj (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1973:16)
    at Parser.pp$3.parseExprAtom (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1805:19)
    at Parser.pp$3.parseExprSubscripts (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExprList (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:2165:22)
    at Parser.pp$3.parseSubscripts (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1741:35)
    at Parser.pp$3.parseExprSubscripts (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1718:17)
    at Parser.pp$3.parseMaybeUnary (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseStatement (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:727:47)
    at Parser.pp$1.parseBlock (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:2105:24)
    at Parser.pp$1.parseFunction (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1065:10)
    at Parser.pp$3.parseExprAtom (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1810:19)
    at Parser.pp$3.parseExprSubscripts (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseMaybeAssign (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1608:25)
    at Parser.pp$3.parseExpression (E:\WORKSPACE\NETBEANS_WORKSPACE\Mantra_Pushpam\node_modules\acorn\dist\acorn.js:1573:21)
 @ ./index.js 7:0-43

Note: When I remove the ajax function, there is no error at all

This is my webpack configuration:

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'public_html/js/bundle.js'
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules')
    },

    module: {
        preLoaders: [{
            test: /\.tag$/,
            exclude: /node_modules/,
            loader: 'riotjs-loader',
            query: {
                //type: 'none'
                //compact: true
            }
        }],
        loaders: [
            /*{
                test: /\.tag$/,
                loader: 'tag',
                exclude: /node_modules/
            },*/
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    //commenting because of this issue https://github.com/mapbox/mapbox-gl-js/issues/3422
                   // presets: ['es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.ProvidePlugin({
            riot: 'riot',
        })
    ]
};

Possible duplicate: [You may need an appropriate loader to handle this file type](http://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b) — Tân, Feb 23 '17 at 15:39
@TânNguyễn There are so many different types of handler. The same configuration is working fine with my other project. — kittu, Feb 23 '17 at 15:41
@TânNguyễn for ajax call, I don't think there is particular handler — kittu, Feb 23 '17 at 15:42

Alexander Nied · Accepted Answer · 2017-02-23T15:50:32.980

4

You've got some malformed JS there-- that's what I would guess is your problem:

var self = this;

login(){ // <== WHAT'S HAPPENING HERE? IS LOGIN SUPPOSED TO BE A FUNCTION DECLARATION?
    $.ajax({
        url: '/feedback',
        type: 'POST',
        data: params, // LESS CRITICAL, BUT I DON'T SEE params DEFINED ANYWHERE
        success: function(res){
            if(res == 'OK'){
                alert("Received your message. We shall get back to your shortly.");
            }
        },
        error: function(err){
            console.log('error: ', err);
        }; // <-- THERE SHOULDN'T BE A SEMICOLON HERE!!!!
    })
} // <== THERE *MIGHT* NEED TO BE A SEMICOLON HERE, DEPENDING ON WHAT YOU'RE TRYING TO DO

edited Feb 23 '17 at 15:50

answered Feb 23 '17 at 15:41

Alexander Nied

12,804
4
25
45

This is es6 syntax. That is not an issue – kittu Feb 23 '17 at 15:42
1

@kittu: Only within an object initializer or class, not standalone as you have it here. What you have here is an attempt to *call* `login`, followed by a standalone block containing your ajax code. The problem is the semicolon anied pointed out. – T.J. Crowder Feb 23 '17 at 15:43
That's fine if your webpack is converting it or the browser can handle it. There definitely shouldn't be a semicolon in the config passed to the `ajax` method, though. – Alexander Nied Feb 23 '17 at 15:43
2

@anied: It's only malformed because of the `;` after the `error` function, amusingly. It's a function call (`login()`) followed by a standalone block. :-) – T.J. Crowder Feb 23 '17 at 15:46
2

@kittu -- even if you allow for that, your error states `SyntaxError: Unexpected token (16:17)` -- now it's hard to know for sure since this is not your source code but copy/pasted into SO, but right around there is the semi-colon-- I'm pretty sure that's what Webpack is choking on. It may package the other stuff, but T.J. Crowder is probably correct that it won't fly once it attempts to execute in the browser. – Alexander Nied Feb 23 '17 at 15:47
@T.J.Crowder -- ah, yeah, good point. I'll temper that in the solution. – Alexander Nied Feb 23 '17 at 15:48
@T.J.Crowder What ever you mentioned in this comment is right `It's only malformed because of the ; after the error function` It fixed it. You mentioned something greek and latin `object initializer or class` Come on man I am still learning. Thank you anyway and sorry for the troll :p was pulling your leg – kittu Feb 23 '17 at 15:58
1

@anied Thank you. It was silly one but out of my bounds – kittu Feb 23 '17 at 16:02
1

@kittu - No problem, glad you got it solved. Sometimes it helps just to have an extra set of eyes on a problem. – Alexander Nied Feb 23 '17 at 16:07

Error when I declare a ajax function

1 Answers1