ampersand-model
ampersand-model copied to clipboard
Published
20 hours ago •
AmpersandJS
AmpersandJS
Incompatibility with Webpack?
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,
}
};
