How to fix style loading error in ReactJS?

Question

Node.js

Good afternoon!
I'm building a test application on ReactJS according to the tutorial ( https://habrahabr.ru/post/309958/).
Many local problems arose, but I figured out all of them, but this one seems simple, but it has already broken my whole head.
Here is the directory structure:

There are lines in the webpack config:

loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader'})
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({fallback : 'style-loader', use: 'css-loader!postcss-loader!less-loader'})
            },

Accordingly, we call client.js there import components/App, and import ./App.css';
So it swears like this:

ERROR in ./src/components/App.css
Module build failed: ReferenceError: self is not defined
    at eval (eval at <anonymous> (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:684:1), <anonymous>:14:30)
    at eval (eval at <anonymous> (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:684:1), <anonymous>:9:47)
    at module.exports (eval at <anonymous> (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:684:1), <anonymous>:31:68)
    at eval (eval at <anonymous> (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:704:1), <anonymous>:7:77)
    at Object.<anonymous> (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:704:1)
    at __webpack_require__ (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:616:30)
    at /var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:663:37
    at Object.<anonymous> (/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css:666:10)
    at Module._compile (module.js:571:32)
    at Object.exec (/var/www/react.sru/www/5/node_modules/webpack/lib/NormalModule.js:94:6)
    at Object.<anonymous> (/var/www/react.sru/www/5/node_modules/extract-text-webpack-plugin/loader.js:112:21)
    at Compiler.<anonymous> (/var/www/react.sru/www/5/node_modules/webpack/lib/Compiler.js:251:10)
    at /var/www/react.sru/www/5/node_modules/webpack/lib/Compiler.js:442:12
    at next (/var/www/react.sru/www/5/node_modules/tapable/lib/Tapable.js:138:11)
    at Compiler.<anonymous> (/var/www/react.sru/www/5/node_modules/extract-text-webpack-plugin/loader.js:93:4)
    at next (/var/www/react.sru/www/5/node_modules/tapable/lib/Tapable.js:140:14)

ERROR in /var/www/react.sru/www/5/node_modules/extract-text-webpack-plugin/loader.js!/var/www/react.sru/www/5/node_modules/style-loader/index.js!/var/www/react.sru/www/5/node_modules/css-loader/index.js!/var/www/react.sru/www/5/src/components/App.css doesn't export content

If you comment out the line, then everything will compile. How to fix the mind I will not apply.

Answer 1

What version of webpack is installed? As in the article or the second version?
If the second one, then it won’t work like that, the config needs to be adapted:
https://webpack.js.org/guides/migrating/
Also, show what you have in App.css? If the less/sass syntax is present there, it will not compile either.