window is not defined ( webpack and reactJS )

Question

The program runs correctly. But when I import an css file into the component, I encounter the following error.

webpack:///./node_modules/style-loader/lib/addStyles.js?:23
        return window && document && document.all && !window.atob;
        ^

ReferenceError: window is not defined
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2)
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46)
    at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:57:46)
    at eval (webpack:///./public/testStyle.css?:12:134)
    at Object../public/testStyle.css (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:193:1)
    at __webpack_require__ (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:23:30)
    at eval (webpack:///./src/client/pages/HomeContainer.js?:31:1)
    at Object../src/client/pages/HomeContainer.js (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:541:1)
    at __webpack_require__ (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:23:30)
    at eval (webpack:///./src/client/Routes.js?:17:22)
[nodemon] app crashed - waiting for file changes before starting...

I encountered another problem and raised the question in the css-loader repository and I encountered this problem after running it.

The project has three webpack files, one of which is the webpack.base.js file, the contents of which are given below :

'use strict';
// const isInProduction = process.env.NODE_ENV === 'production';
module.exports = {
    context: __dirname,
    module: {
        rules: [
            {
                test: /\.(pdf|ico|jpg|eot|otf|woff2|woff|ttf|mp4|webm)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'file-loader',
                    query: {name: '[name].[ext]'},
                },
            },
            {
                test: /\.js$/,
                exclude: /node-modules/,
                loader: 'babel-loader'
            },{
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {modules: true, sourceMap: true}
                    }
                ]
            }
        ]
    }
};

and also the content of the .babelrc file :

{
  "presets": [
    ["es2015", {"modules": false}],
    ["env", {
        "targets": {
          "browsers": ["last 2 versions"],
          "node":"current"
        }
      }
    ],["react"],"stage-0"
  ]
}

packages version :

"webpack": "^3.11.0", "style-loader": "^0.18.2", "css-loader": "^0.28.9"

---

I emphasize that before asking this question, I have studied all the issues related to this problem, but I have not achieved the desired result.

NOTE : The project uses the react server side and I use 2 important files for render. one for the client side and one for the server side. and also redux is used.

To view the details of the project files, I can refer here .

Do you know the solution to this problem ?

Again, I emphasize that I have had a lot of research before solving this question that has not reached the desired result.

Thank you for your guidance.

Answer 1

This is what style-loader do:

- Adds CSS to the DOM by injecting a tag

& this is what ExtractTextWebpackPlugin do:

- extract text from a bundle, or bundles, into a separate file.

You'll probably never need to do both at one place but it's great to have inlining as a fallback to when ExtractTextWebpackPlugin fails.

window isn't defined, because there isn't any during CSS extraction. then you can try this:

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