Otis Wright
Otis Wright

Reputation: 2110

babel-preset-env not working with webpack-dev-server v2.2.0-rc.0

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

Answers (1)

Hailwood
Hailwood

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

Related Questions