Reputation: 2110
I am attempting to setup `webpack 2 and babel-preset-env.
I have the following base config:
const config = require('./config');
const path = require('path');
module.exports = {
devtool: 'source-map',
performance: {
hints: false
},
entry: [
'./src/index.js',
],
output: {
path: path.join(__dirname, '../dist'),
publicPath: '/dist/',
filename: 'app.js'
},
plugins: [],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: ['/node_modules/'],
query: {
'presets': [['env', {
"modules": false,
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]],
'plugins': [],
},
},
//...
],
},
}
And the following prod config:
const base = require('./webpack.base');
const webpack = require('webpack');
base.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
},
})
);
module.exports = base;
And the following dev config:
const base = require('./webpack.base');
const webpack = require('webpack');
base.entry.push(
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:4000'
);
base.plugins.push(
new webpack.HotModuleReplacementPlugin()
);
module.exports = base;
And finally here is my dev server config:
const dev = require('./webpack.dev');
const webpack = require('webpack');
const server = require('webpack-dev-server');
const path = require('path');
const compiler = webpack(dev);
const instance = new server(compiler, {
hot: true,
filename: dev.output.filename,
publicPath: dev.output.publicPath,
stats: {
colors: true,
}
});
instance.listen(4000, 'localhost', () => {})
I have tried adding inline: false
and setting contentBase
to the absolute path to my app as per this post all with no luck.
Now when I run with the prod config everything compiles fine, however when I run with the dev config I get the following error:
ERROR in ./~/debug/browser.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/otis/Developer/hassle/node_modules/debug"
at /home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)
at OptionManager.mergePresets (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)
at OptionManager.mergeOptions (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)
at OptionManager.init (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
at File.initOptions (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/home/otis/Developer/hassle/node_modules/babel-loader/lib/index.js:38:20)
@ ./~/sockjs-client/lib/main.js 25:10-26
@ ./~/sockjs-client/lib/entry.js
@ (webpack)-dev-server/client/socket.js
@ (webpack)-dev-server/client?http://localhost:4000
@ multi main
Here is a copy of my package.json if it helps:
{
"name": "hassle",
"version": "0.0.0",
"description": "Hassle an event organisation app",
"main": "index.js",
"scripts": {
"dev": "NODE_ENV=development node build/server.js",
"build": "NODE_ENV=production webpack --config build/webpack.prod.js",
"test": "echo 'lets implement'"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Shipwrecked/Hassle.git"
},
"author": "Otis Wright",
"license": "MIT",
"bugs": {
"url": "https://github.com/Shipwrecked/Hassle/issues"
},
"homepage": "https://github.com/Shipwrecked/Hassle#readme",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.2",
"babel-loader": "^6.2",
"babel-preset-env": "^1.0",
"css-loader": "^0.26",
"file-loader": "^0.9",
"node-sass": "^4.0",
"rimraf": "^2.5",
"sass-loader": "^4.1",
"style-loader": "^0.13",
"webpack": "^2.2.0-rc.1",
"webpack-dev-server": "^2.2.0-rc.0"
}
}
Upvotes: 2
Views: 2733
Reputation: 92581
There was an issue with the debug package where it had a .babelrc file in it's root directory, however was only requiring the preset as a dev dependency.
This has been fixed in a recent pull request. See this issue https://github.com/visionmedia/debug/issues/381
Upvotes: 1