webpack-dev-server: Cannot GET /

Operating System: Windows 10 x64
Node Version: 7.3.0
NPM Version: 3.10.10
webpack Version: 4.5.0
webpack-dev-server Version: 3.1.3

This is a bug
This is a modification request

Code

https://github.com/MitchTalmadgeUofU/Digital-Story/tree/a73fbbf8c5d0f90d9190232e976407610eb5fb7e

Expected Behavior

When I visit http://localhost:9000/, it should display the index.html page generated by HtmlWebpackPlugin.

Actual Behavior

When I visit http://localhost:9000/, I receive a 404: Cannot GET /. If I compile the index.html using my production webpack config – so that the files are generated on the hard drive and not in memory – I can then load webpack dev server and the index.html file is served (but does not update when I make changes to the template).

For Bugs; How can we reproduce the behavior?

Clone the repository

Edit: We discovered that this error only occurs on Windows, and only if you clone into a directory with spaces in the path. No spaces? No error.

Checkout this tree: git checkout a73fbbf8c5d0f90d9190232e976407610eb5fb7e .
Install dependencies: npm i
Start dev-server: npm run dev-web.

Edit: I forgot to remove part of my dev-web script; open package.json and replace the dev-web script contents with:

webpack-dev-server --config webpack/webpack.dev.config.js --progress

Visit http://localhost:9000 and see the error message.
Stop the dev-server.
Compile the production files: npm run build-web.
Start dev-server again: npm run dev-web.
Visit http://localhost:9000 and see “Hello World”.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 26
Comments: 32 (1 by maintainers)

Most upvoted comments

As far as I’m concerned I’ve fixed the issue by

making sure a base path is defined
making sure all 404s are redirected to index.html

module.exports = {
  ...
  output: {
    ...
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true,
  },
}

"webpack": "^4.12.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3"

+26

dandohotaru on Jun 25, 2018

The problem is resolved. The issue was with the directory name. For the output, I was using “output” directory and for devServer I was providing contentBase from “dist” which was not containing index.html page. So it was throwing “Cannot Get /” error

entry: './src/app.js',

    output: {
        path: path.join(__dirname, 'output'),
        filename: 'bundle.js'        
    },

    devServer: {
        contentBase: path.join(__dirname, 'output'),
        compress: true,
        port: 9000,
        historyApiFallback: true,
        publicPath: '/'
    }

+22

PatelDipen92 on Aug 1, 2018

ok i got this - thanks to this issue - https://github.com/webpack/webpack-dev-server/issues/1375 for now - you need remove spaces from the project path

+17

ejnu on Apr 12, 2018

@MitchTalmadgeUofU you can use the following versions; these are the last ones that worked for me:

“html-webpack-plugin”: “^3.2.0”, “webpack”: “^4.5.0”, “webpack-dev-server”: “3.1.0”

I receive Cannot GET / on Windows for all versions which are higher than 3.1.0.

+10

tresko on Apr 10, 2018

@ejnu I can confirm, the problem is solved by removing spaces from the path. Particularly, the contentBase is what must have no spaces in the path.

It is quite clear this is a webpack-dev-middleware bug, so everyone please follow this issue until it is fixed, then we can update the dependency in this repository after a fix is released:

https://github.com/webpack/webpack-dev-middleware/issues/296

ghost on Apr 12, 2018

output: {
    ...
    publicPath: '/'
  }

This is the key

zeroone001 on May 5, 2019

@nguyenkhois I have tried that also but still getting the same error. I am using Windows 8.1

    entry: './src/app.js',

    output: {
        path: path.join(__dirname, './output'),
        filename: 'bundle.js',
        publicPath: '/'
    },

    devServer: {
        contentBase: path.join(__dirname, './dist'),
        compress: true,
        port: 9000,
        historyApiFallback: true
    }

PatelDipen92 on Aug 1, 2018

the setup bellow works for me as expected for quite some time by now…

webpack.config.js

const path = require("path")
const webpack = require('webpack')

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: '[name].bundle.js',
    publicPath: '/',
  },
  ...

webpack.dev.js

const path = require("path")
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.config.js')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8080,
    stats: "minimal",
    watchContentBase: true,
    historyApiFallback: true,
    open: false,
    hot: false
  },
  ...

index.html

<head>
	<base href="./" />
	...
</head>

dandohotaru on Aug 1, 2018

@nguyenkhois I had the same issue, upgraded to 3.1.4, and it has been fixed! Thanks!

theliveseven on Jun 11, 2018

This issue has been fixed in version 3.1.4. It works finne for me now 👍 Thanks so much! 🥇

nguyenkhois on May 10, 2018

However Webpack Dev Middleware issue still persists, only Version of 3.0.1 for Webpack Dev Middleware works, below(MIME type issue) or above(Cannot GET /) all fails.

GuacheSuede on Apr 10, 2018

I also have the same problem that only appears on Windows, but on Mac and Ubuntu, it works fine.

Operating System: Windows 10 x64
Node Version: 9.11.1
Yarn Version: 1.3.2
webpack Version: 4.5.0
webpack-dev-server Version: 3.1.3

tresko on Apr 10, 2018