Webpack-dev-server: 404 Errors after updating to V 2.4.1

[jasan-s]

After updating Webpack to V2.2.1 the HMR stopped working thus I decided to update Webpack-Dev-Server V2.4.1. But Now I'm getting 404 errors :

Failed to load resource: the server responded with a status of 404 (Not Found) vendor.js
Failed to load resource: the server responded with a status of 404 (Not Found) app.js

My config file:

const PATHS = {
  root: path.join(__dirname),
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'dist')
}

const base = {
  entry: {
    app: [
      'babel-polyfill',
      PATHS.app + '/index.js'
    ],
    vendor: ['react', 'react-dom', 'react-router', 'redux', 'react-redux']
  },
  resolve: {
    modules: [
      path.resolve('./app'),
      'node_modules'
    ],
  }
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  output: {
    path: PATHS.build,
    filename: '/[name].js'
  },
  module: {
    loaders: [
      {test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.style.js$/, loader: 'style-loader!css-loader!postcss-loader?parser=postcss-js!babel-loader'},
      {test: /\.css$/, loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]&importLoader=1!postcss-loader'},
      {test: /\.scss$/, loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]&postcss-loader!sass-loader'},
      {test: /\.(jpg|png)$/, loader: 'file-loader?name=[path][name].[hash].[ext]', include: PATHS.app + '/media/images'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff'},
      {test: /\.(ttf|eot|svg|mp3)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=[path][name].[hash].[ext]'}
    ]
  },
  devServer: {
    contentBase: PATHS.build,
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: 'errors-only'
  },
  plugins: [HTMLWebpackPluginConfig, ScriptExtHtmlWebpackPluginConfig, new webpack.HotModuleReplacementPlugin(), CleanDistPlugin, CommonsChunkPlugin, CopyFilesPlugin, CreateFaviconsPlugin]
}

[SpaceK33z]

Can you try adding publicPath: '/' to your base object?

If that isn't it I'll need a repository reproducing your issue. It can take a while though before I can help you since I'm going on vacation tomorrow. If you want a quick answer perhaps StackOverflow is a better place to go to (HMR is not broken in WDS 2.4.1).

[jasan-s]

I tried adding that. I get the error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'publicPath'. These properties are valid:

[jasan-s]

@SpaceK33z thanks for the input though, I did ask on stackoverflow. hopefully i Can solve this, or else i'll just revert back to webpack-dev-server V1.x.

[SpaceK33z]

Oh it's output: { publicPath: '/' }.

[jasan-s]

I have tried that already by adding it in my developmentConfig.output I get the error Uncaught SyntaxError: Unexpected token < in the html

[jquense]

Yeah also suddenly getting 404's. We have a publicPath set but it's not / previously the dev-server handled this fine, and managed to find the files just fine. Suddenly no dice. My hunch is it's change in express tho, as I ran into the same thing suddenly writing a small express server to serve my webpack files just the other idea.

[SpaceK33z]

My hunch is it's change in express tho, as I ran into the same thing suddenly writing a small express server to serve my webpack files just the other idea.

That would be interesting. Could you elaborate / find a related issue on that? AFAIK the Express version hasn't changed in WDS v1 and v2.

[jquense]

I tried poking around to see and couldn't find anything. I had a very strange issue just this week where I wrote this express server to mimic the dev server but for e2e tests.

const express = require('express');
const history = require('connect-history-api-fallback');
const httpProxy = require('http-proxy-middleware');

const app = express();

const { output, devServer } = require('../webpack.config');

Object.keys(devServer.proxy).forEach((route) => {
  app.use(httpProxy(route, devServer.proxy[route]));
});

const staticFiles = express.static(devServer.contentBase);

app.use('*', staticFiles);

app.use(history({
  index: devServer.historyApiFallback,
}));

app.listen(devServer.port);

It was working fine and then suddenly started 404ing a little later

I eventually had to add:

app.use(output.publicPath, staticFiles);

So maybe its related to the history fallback or proxy, but the culprit seems more like serve-static, (despite not changing recently)

[louisscruz]

I'm also seeing 404s.

In my webpack.config.js:

var path = require('path');

module.exports = {
  context: __dirname,
  entry: './src/widgets.jsx',
  output: {
    path: path.resolve(__dirname, '/dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/],
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
  devtool: 'source-maps',
  resolve: {
    extensions: ['.js', '.jsx', '*']
  }
}

However, if I hard code the output as follows, it works as expected:

output: {
  filename: './dist/bundle.js'
}

Also, I should mention that everything seems to work find if my bundle is not nested. If, for example, my output is like below (and provide the correct script source), then it can be found:

output: {
  filename: './bundle.js'
}

Is there something else I need to do? Or is this an identifiable bug? Any help is much appreciated!

[louisscruz]

One more thing I should add: in the first case, if I just run webpack once, the bundle does indeed show up where expected.

[sanpoChew]

Also getting this error with my bundles unavailable, removing output.path as @louisscruz suggested has fixed it for now

[serut]

I don't get how to avoid 404, my image /img/background.jpg was correctly retrievable with webpack 1 but not anymore :

webpack.config.js

  output: {
    // Webpack compilation directory
    path: `${__dirname}/build`,
    // Webpack main bundle file name
    filename: 'bundle.js',
    // Webpack chunks files namesc
    chunkFilename: '[id].chunck.js',
    publicPath: '/',
  }
  module: {
    rules: [
      {
        test: /\.jpg$/,
        // was  'file-loader?name=/img/[name].[ext]' in my webpack 1 config
        loader: 'file-loader?name=[name].[ext]&outputPath=./build/img/&publicPath=/img/',
      },
    ]
  },
  devServer: {
    port: 3333,
    // Web directory serve by the webpack dev server
    contentBase: path.resolve(__dirname, 'build'),
  }

Can someone help me?

Note that if I build my app, the image is inside the right folder.

EDIT:

Ok the right configuration of file-loader is :
loader: 'file-loader?name=[name].[ext]&outputPath=./img/',

[SpaceK33z]

@louisscruz I tried your config, but for me it seems to be working fine. You don't mention exactly what you do though, so it's hard to reproduce.

The only way to properly debug this is to have someone make a test repository reproducing the issue.

[jquense]

hopefully I can put something together

[louisscruz]

@SpaceK33z Here is a test repository.

@jquense Does this test repository cover your cases too?

[louisscruz]

Does this test repository help clarify/reproduce the issue?

[moimael]

I also have the same issue, when I tried to request anything in the publicPath I get a 404 :

  entry: Object.assign({}, apps()),

  output: {
    path: path.join(__dirname, './public/dist'),
    publicPath: '/galaxy-assets/dist/',
    filename: production ? '[name].[chunkhash].js' : '[name].[hash].js',
  },

  devtool: production ? 'source-map' : 'cheap-module-eval-source-map',

  devServer: {
    hot: true,
    contentBase: path.join(__dirname, './public/dist'),
    publicPath: '/galaxy-assets/dist/',
  }

Tried @louisscruz workaround, but it didn't work. Changing the publicPath to / seems to fix it.

[rolandfung]

Getting the same behavior as @louisscruz, where the bundle is served correctly if output.filename is not nested. Normally I use

filename: '/[name]/bundle.js'

I'm passing an object for config.entry to create named chunks, one for each or our SPA's.

Just upgraded from WDS 1.16.2 to 2.4.1 and got this behavior. I'm on webpack 2.2.1.

[shellscape]

@louisscruz @moimael @rolandfung we've had a few versions drop since this was first reported, are you still seeing the same issues on the latest?

[shellscape]

Closing due to inactivity. Please ping me if this is still an issue with 2.7.1 and we'll reopen.

[mojave27]

For what its worth, I was having this same issue and it was simply an extra empty line at the bottom of the webpack config. I don't have an explanation, but removing the empty line fixed the 404s.

[jcklpe]

I'm getting similar errors but erasing the last line did not fix things for me. I'm a designer working my way through a webpack tutorial and even getting the code from the tutorial's repo straight isn't working.