Incompatibility with Webpack? #76

yamsellem · 2016-04-29T21:57:16Z

Using ampersand-model with webpack creates an invalid bundle.
The error require is not defined occurs on line 14654 (caused by module.exports = require("net");).

Below is a snippet that reproduces the problem.
Surprisingly, the exact same config works perfectly when using only ampersand-view.

Bonus point: this way, the (broken) bundle is made of 54756 lines. With browserify it's a working bundle made of 8406 lines. Any idea on the huge difference of file weight?

app.js

var Model = require('ampersand-model');
module.exports = Model.extend({});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    </body>
    <script src="js/bundle.js"></script>
</html>

package.json

{
    "dependencies": {
        "ampersand-view": "6.x",
        "ampersand-model": "6.x"
    },
    "devDependencies": {
        "webpack": "x",
        "webpack-build": "x",
        "babel-core": "x",
        "babel-loader": "x",
        "babel-preset-es2015": "x",
        "handlebars": "x",
        "handlebars-loader": "x",
        "json-loader": "x",

        "hbsfy": "x",
        "watchify": "x",
        "browserify": "x"
    },
    "scripts": {
        "failing": "webpack",
        "working": "browserify -t [hbsfy -e hbs] js/app.js -o js/bundle.js"
    }
}

webpack.config.js

var webpack = require('webpack');

module.exports = {
    context: __dirname + "/js",
    entry: {
        "bundle" : "./app"
    },
    output: {
        path: __dirname + "/js",
        filename: "[name].js"
    },
    module: {
        loaders: [
            { test: /\.json$/, loader: 'json-loader'},
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    compact: false,
                    presets: ['es2015']
                }
            },
            {
                test: /\.hbs$/,
                loader: 'handlebars-loader'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"',
            'global': {} // bizarre lodash(?) webpack workaround
        })
    ],
    target: 'node',
    node: {
        __dirname: false,
        __filename: false,
    }
};

The text was updated successfully, but these errors were encountered:

yamsellem mentioned this issue Apr 29, 2016

Incompatibility with Ampersand? webpack/webpack#2417

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incompatibility with Webpack? #76

Incompatibility with Webpack? #76

yamsellem commented Apr 29, 2016 •

edited

Loading

Incompatibility with Webpack? #76

Incompatibility with Webpack? #76

Comments

yamsellem commented Apr 29, 2016 • edited Loading

yamsellem commented Apr 29, 2016 •

edited

Loading