Webpack-dev-server: Cannot GET /

[ghost]

• 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

• [x] 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?

1. Clone the repository

2. 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.

3. Checkout this tree: git checkout a73fbbf8c5d0f90d9190232e976407610eb5fb7e .

4. Install dependencies: npm i
5. Start dev-server: npm run dev-web.
6. 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

1. Visit http://localhost:9000 and see the error message.
2. Stop the dev-server.
3. Compile the production files: npm run build-web.
4. Start dev-server again: npm run dev-web.
5. Visit http://localhost:9000 and see "Hello World".

[tresko]

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

[ghost]

I downgraded back to these versions:

"html-webpack-plugin": "^2.30.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"

And I can confirm that it works again. This seems to be a problem with upgrading to webpack 4

[tresko]

@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.

Is this related? https://github.com/webpack/webpack-dev-middleware/issues/270

[GuacheSuede]

@tresko I verify your solution works 👍

[GuacheSuede]

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.

[ejnu]

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

[ghost]

@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

[kasperhhk]

I think this issue is caused by webpack/webpack-dev-middleware#297 , which has been solved yesterday, and a new release of webpack-dev-middleware has come out (v3.1.3) immediately after. This repo should probably update the version it's using from 3.1.2 to 3.1.3.

[s-h-a-d-o-w]

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

Odd, 3.1.1 still works for me.

Just created a project from scratch based on the official webpack docs, got the "Cannot GET /" error, downgraded to 3.1.1 and everything is good.

[nguyenkhois]

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

[theliveseven]

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

[dandohotaru]

@nguyenkhois, @theliveseven can you you mention what webpack version (and plugins) do you rely on?

[nguyenkhois]

@dandohotaru

• Webpack Dev Server 3.1.1 or 3.1.4 works fine for me and I rely on 3.1.1. I have not used so much this version 3.1.4 but I think it works very well.
• Webpack - I use the latest version and it works without a problem.
• Plugins: You decide what fits your project. You can view my simple example here

Have a nice day!

[dandohotaru]

@nguyenkhois well, the only reason i'm asking is because i couldn't have webpack-dev-server refresh as expected for any of the versions i've tried (3.1.x)
Check my dependencies in here
In the meantime i tackle the problem with lite-server instead :)

[theliveseven]

@dandohotaru

• webpack : 4.6.0
• webpack-dev-server: 3.1.4

I was previously using webpack-dev-server:3.1.3. I had no issue with this before because I was only using my mac for development. I encountered the issue when I set up the project in my PC (Windows 10). Upgrading the webpack-dev-server to version 3.1.4 fixed the issue.

Here is a part of my package.json file :)

"webpack": "^4.6.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"

[dandohotaru]

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"

[hz9527]

I also have the same problem(entrypoint undefined = index.html). first, I thought it was a bug of webpack4, but I built it by the config, everything is normal. so I thought it was a bug of webpack-dev-server. but I it not work with some other versions. finally, I add "context: resolve('../')", good running!

[PatelDipen92]

I am using

"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"

still getting the error.

My webpack.config file looks like

````
var path = require('path');

module.exports = {
entry: './src/app.js',

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

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

}

[nguyenkhois]

@PatelDipen92 Have you tried to use "./" before output and dist?:
````
var path = require('path');

module.exports = {
entry: './src/app.js',

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

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

}
````

I use Windows 10 and WDS works fine for me. You can see here on my repo.

[PatelDipen92]

@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
    }

[hz9527]

Duplicate of #1421 e...I try it again. entryPoint undefined = index.html. but I can use devServer. you can set context and set devServer.publicPath = '/' (not './'). so you can get page with inject js & css. @PatelDipen92

[dandohotaru]

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>

[hz9527]

you should set context & publicPath
webpack.config.js

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

module.exports = {
 context: path.join(__dirname, '../'),
  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: {
    publicPath: '/',
    port: 8080,
    stats: "minimal",
    watchContentBase: true,
    historyApiFallback: true,
    open: false,
    hot: false
  },
  ...

I think contentBase is setting static server(if you need)
so you set context & publicPath(in devServer)

[PatelDipen92]

@hz9527 @dandohotaru I have tried with both solutions you have provided. But none of it worked.

[PatelDipen92]

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: '/'
    }

[adamklepacz]

Got the same problem after downloading some of the boilerplates. Thank You @PatelDipen92 for resolving a problem

[fortinmike]

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,
  },
}

Thanks @dandohotaru, this works for us too. We didn't have to revert to earlier versions of the packages; just adding the publicPath did the job (we already had historyApiFallback so I can't comment on the effect of that).

[zeroone001]

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

This is the key

[AndreyGFranca]

I made a copy of index.html in a new folder I called deployment to match what I specified in the output.path

[ecarrera]

https://stackoverflow.com/questions/37954809/cannot-get-error-running-hello-world-in-webpack

[a-m-dev]

@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.

Is this related? webpack/webpack-dev-middleware#270

with [email protected] you have to run npm audit fix,

basically does not works now ...
:(((

[darnoceloc]

@PatelDipen92 Good eye! This tormented me for quite some time.

    output: {
        path: path.resolve(__dirname, 'output'),
        publicPath: './dist/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, 'output'),
        port: 3000,
        writeToDisk: true,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true,
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({hash: true,
            title: 'My Awesome application',
            myPageHeader: 'Hello World',
            template: './src/index.html',
            filename: './dist/index.html'}),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.HotModuleReplacementPlugin({template: './public/index.html'})
    ]    
};