CODEWITHSUNDEEP
javascriptreactjswebpack
Janaka Pushpakumara
Janaka Pushpakumara

Reputation: 5107

`[WDS] Disconnected` ReactJS, webpack

I am getting this error after run yarn start. I am trying to develop a hello-word ReactJS app with webpack and Babel

[WDS] Disconnected! Content Security Policy: The page’s settings blocked the loading of a resource at http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css (“style-src”). Content Security Policy: The page’s settings blocked the loading of a resource at blob:http://localhost:3000/edcc77c5-a0d7-4b24-9f6d-5e740ffd77df (“style-src”).

This is my webpack.config.js file

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;
module.exports = {
    mode: 'development',  
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash].js'
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                          modules: true,
                          camelCase: true,
                          sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/favicon.ico'
        })
    ],
    devServer: {
        host: 'localhost',
        port: port,
        historyApiFallback: true,
        open: true
    }
};

This is my package.jon file

{
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-prop-types": "^0.4.0",
    "react-router-dom": "^4.2.2",
    "semantic-ui-react": "^0.79.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.1.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
  <title>webpack-for-react</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

I try to slove this error. But I couldn't do it. If somebody has a clue please help me. I think this error comes from webpack.config.js file.

Upvotes: 1

Views: 1638

Answers (1)

Alex Michailidis
Alex Michailidis

Reputation: 4153

The problem is the Content-Security-Policy you use.

Right now you are allowing only local css files and inline styles.

When you try to import semantic.min.css cloudflare is not an allowed host.

So you probably need to add 

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' http://cdnjs.cloudflare.com; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

I suggest you to read CSP documentation to find out more.

And also try to use Content-Security-Policy-Report-Only while in development so you only get the reports of the violations.

Upvotes: 2

Related Questions