javascript - Keep getting [WDS] Disconnected! error, ReactJs, Webpack - Stack Overflow

admin管理员组

文章数量:1392002

This question relates to post: Keep getting [WDS] Disconnected! error

I have updated my webpack config settings according to the answers, however I still the "[WDS] Disconnected! error" within the console.

Please any suggestions?

webpack.config.js

var webpack = require("webpack");
var path = require("path");


module.exports = {

devtool: "inline-source-map",
entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080/",
    "webpack/hot/only-dev-server",
    "./src"
],
devServer: {
    contentBase: "./public",
    hot: true,    
    inline: true,
    quiet: false,
    noInfo: true,
    stats: { colors: true }
},
output: {
    path: path.join(__dirname, "./public"),
    filename: "./assets/js/bundle.js"
},
resolve: {
    modulesDirectrories: ["node_modules", "src"],
    extentions: ["", ".js"]
},
module : {
    loaders: [
        { 
            test: /\.jsx?$/,
            exclude: "/node_modules/",
            loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
        }, 
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, 
        {
            test: /\.gif$/,
            loader: "url-loader?mimetype=image/png"
        }, 
        {
            test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
            loader: "url-loader?mimetype=application/font-woff"
        }, 
        {
            test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
            loader: "file-loader?name=[name].[ext]"
        }
    ]
},
plugins: [ 
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
        "process.env": {
            NODE_ENV: JSON.stringify("development")
        }
    })
]}

This question relates to post: Keep getting [WDS] Disconnected! error

I have updated my webpack config settings according to the answers, however I still the "[WDS] Disconnected! error" within the console.

Please any suggestions?

webpack.config.js

var webpack = require("webpack");
var path = require("path");


module.exports = {

devtool: "inline-source-map",
entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080/",
    "webpack/hot/only-dev-server",
    "./src"
],
devServer: {
    contentBase: "./public",
    hot: true,    
    inline: true,
    quiet: false,
    noInfo: true,
    stats: { colors: true }
},
output: {
    path: path.join(__dirname, "./public"),
    filename: "./assets/js/bundle.js"
},
resolve: {
    modulesDirectrories: ["node_modules", "src"],
    extentions: ["", ".js"]
},
module : {
    loaders: [
        { 
            test: /\.jsx?$/,
            exclude: "/node_modules/",
            loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
        }, 
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, 
        {
            test: /\.gif$/,
            loader: "url-loader?mimetype=image/png"
        }, 
        {
            test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
            loader: "url-loader?mimetype=application/font-woff"
        }, 
        {
            test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
            loader: "file-loader?name=[name].[ext]"
        }
    ]
},
plugins: [ 
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
        "process.env": {
            NODE_ENV: JSON.stringify("development")
        }
    })
]}

• javascript
• reactjs
• webpack
• webpack-dev-server

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Sep 2, 2016 at 11:53 vicgoysovicgoyso 61611 gold badge1414 silver badges3535 bronze badges 5

• Can you try webpack-dev-server/client?localhost:8080/ over webpack-dev-server/client?http://127.0.0.0:8080/? Looks like there's a mismatch. I would remend running webpack-dev-server in inline mode to avoid this type of problems. – Juho Vepsäläinen Commented Sep 2, 2016 at 16:16
• Hi Juho, I have tried both paths however I get same error, and as you can see in the code, it already running in inline mode. Thanks – vicgoyso Commented Sep 3, 2016 at 7:37
• You should choose one method instead of using both at the same time. So either set those entries or use the inline mode. – Juho Vepsäläinen Commented Sep 3, 2016 at 9:01
• It worked when I update "module : { loaders: [" to "module : { loader: [" – vicgoyso Commented Sep 10, 2016 at 8:35
• Does this answer your question? Keep getting [WDS] Disconnected! error – Michael Freidgeim Commented Sep 7, 2021 at 21:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Change the transportMode to ws instead of "sock-js.node":-

devServer: {
        transportMode: 'ws', 
        injectClient: false,
      }

This will be solved by Enabling Error Overlay,

overlay:true include one more property in devServer object

devServer: {
    ...
    overlay: true,
}

click here for more info webpack-dev-server

本文标签： javascriptKeep getting WDS Disconnected errorReactJsWebpackStack Overflow