webpack dev server does not show the content

Question

I have the following problem when running the webpack dev server: when I run npm start, it show the following:

➜ directory git:(staging) ✗ npm start

directory @1.0.0 start directory BUILD_DEV=1 BUILD_STAGING=1 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

http://localhost:8080/

webpack result is served from /undefined/

content is served from

directory 404s will fallback to /index.html

Hash: 75773622412153d5f921

Version: webpack 1.12.11

Time: 43330ms

I guess the problem might because the following line: webpack result is served from /undefined/

When I open the browser at http://localhost:8080/, it appear as follow:

Cannot GET /

and there is no thing in the console.

Do you have any ideas for this problem ?

UPDATE: WEBPACK CONFIG FILE

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');

const deps = [
  'moment/min/moment.min.js',
  'underscore/underscore-min.js',
];

/* Include SASS path here if you want to this in your sass files:
 *   @import 'bourbon';
 */
const bourbon = require('node-bourbon').includePaths;

const TARGET = process.env.npm_lifecycle_event;
const ROOT_PATH = path.resolve(__dirname);
const SASS_DEPS = [bourbon].toString();

const BUILD_NUMBER = process.env.CI_BUILD_NUMBER;

const common = {
  entry: path.resolve(ROOT_PATH, 'app/index.js'),
  output: {
    filename: BUILD_NUMBER + '-[hash].js',
    path: path.resolve(ROOT_PATH, 'build'),
    publicPath: `/${BUILD_NUMBER}/`,
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass?includePaths[]=' + SASS_DEPS],
        include: path.resolve(ROOT_PATH, 'app'),
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'sass?includePaths[]=' + SASS_DEPS,
          'postcss'
        ],
        include: path.resolve(ROOT_PATH),
        exclude: /(pure\/grids|Grids).*\.css$/,
      },
      {
        test: /(pure\/grids|Grids).*\.css$/,
        loaders: [
          'style',
          'css',
          'sass?includePaths[]=' + SASS_DEPS,
        ],
        include: path.resolve(ROOT_PATH),
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&minetype=application/font-woff',
      },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: path.resolve(ROOT_PATH, 'app/index.html'),
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
      },
    }),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),
      __STAGING__: JSON.stringify(JSON.parse(process.env.BUILD_STAGING || 'false')),
      __API_HOST__: JSON.stringify(process.env.BUILD_STAGING ? 'my.api' : 'my.api'),
    }),
  ],
  resolve: {
    alias: {
      'styles': path.resolve(ROOT_PATH, 'app/styles'),
    },
    extensions: ['', '.js', '.jsx', '.json'],
  },
  postcss: function() {
    return [
      require('postcss-import'),
      require('autoprefixer'),
      require('postcss-cssnext'),
    ]
  }
};

if (TARGET === 'start' || !TARGET) {
  module.exports = merge(common, {
    output: {
      filename: '[hash].js',
      path: path.resolve(ROOT_PATH, 'build'),
      publicPath: '/',
    },
    devtool: 'eval-source-map',
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loaders: [
            'react-hot',
            'babel-loader'
          ],
          include: path.resolve(ROOT_PATH, 'app'),
        },
      ],
    },
    devServer: {
      colors: true,
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ],
  });
} else if (TARGET === 'build' || TARGET === 'builds') {
  const config = {
    resolve: {
      alias: {},
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          include: path.resolve(ROOT_PATH, 'app'),
        },
      ],
      noParse: [],
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compressor: {
          screw_ie8: true,
          warnings: false,
        },
        compress: {
          warnings: false,
        },
        output: {
          comments: false,
        },
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.DefinePlugin({
        'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) },
      }),
    ],
  };
  deps.forEach((dep) => {
    const depPath = path.resolve(nodeModulesDir, dep);
    config.resolve.alias[dep.split(path.sep)[0]] = depPath;
    config.module.noParse.push(depPath);
  });
  module.exports = merge(common, config);
}

Answer 1

Same problem occurred to me when i started using babel-loader > 6.

It was fixed by adding contentBase in webpack dev server configuration.

In my case it looked like this

new WebPackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    contentBase: __dirname + '/public'
}).listen(3000, 'localhost')

Answer 2

I would be great to see your webpack config file to pin point the exact problem, but from the error message, there could be multiple problem

• Make sure you are on the right port
• Make sure your webpack config has path and public path setup
• Make sure you have contentBase setup as well

Without seeing your webpack file and more concrete detail, it is quite hard to pinpoint the issue. But you can always go to https://webpack.github.io/docs/webpack-dev-server.html for information on how to set it up.