7

So I've been trying to get Sweet.js working on my ES6 project, using Webpack to compile it all. I've been able to get each to work separately, but no matter how I've tried to put them together it has given some sort of error... I think it's mostly to do with source maps, since the error generally looks something like this:

Module build failed: Error: C:/Users/.../index.js: Invalid mapping: {"generated":{"line":4,"column":12,
"lastColumn":null},"source":null,"original":{"line":null,"column":null},"name":null}

And here's the code that's failing:

webpack.config.js:

module.exports = {
    entry: './public_html/script/src/index.js',
    // ...
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules.*\.js/, loader: 'babel!sweetjs?modules[]=./macros.sjs&sourceMap=true' },
            // ...
        ]
    },
    // ...
    devtool: 'source-map',
    // ...
};

macros.sjs:

macro (=~) {
    rule infix { $x | $y } => {
        !!$y.test($x)
    }
};
export (=~);

macro (!=~) {
    rule infix { $x | $y } => {
        !$y.test($x)
    }
};
export (!=~);

index.js:

let x = "asdf", p = /a/i;
x =~ p;

Reversing the loaders didn't work, since Babel didn't know what to do with the macros. Removing the Babel loader had it compile, but then (with more complicated stuff going on) Webpack failed because it didn't know what to do with the ES6 things.

So far I haven't found anything about using both babel and sweetjs loaders at once... Is it even possible?

Edit: So I found out its a bug with the sweetjs-loader: https://github.com/jlongster/sweetjs-loader/issues/4

Setting the true to false fixes the issue, and creates another. Sweet.js seems to be putting some garbage data into the bottom of the files, which messes with Babel and Webpack's module loading. This error comes up multiple times per build:

ERROR in ./public_html/script/src/main-menu/index.js
Module build failed: Error: Line 56: Unexpected token ILLEGAL
[... } ) ;  ...]
foxfriends
  • 91
  • 1
  • 6

0 Answers0