Webpack4 uses style-loader to report window is not defined errors

configured webpack4, page error window is not defined when scss file is introduced in js

clipboard.png

the relevant loader code is as follows: 

{
    test: /\.(css|scss)$/,
    use: [
      "style-loader",
      "css-loader",
      "sass-loader"
    ]
      },
      {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      "file-loader"
    ]
}

comment out style-loader, the page will not report an error, but there is no corresponding style

Javascript
Jul.15,2022

style-loader inserts styles into the dom, probably using a window object.
are you doing server-side rendering? If so, this error will be reported because the server does not have a window object.
the solution is to use the isomorphic-style-loader package 

{
    test: /\.(css|scss)$/,
    use: [
        'isomorphic-style-loader' ,
        'css-loader',
        'sass-loader'
    ]
}

because of the conflict between style-loader and mini-css-extract-plugin, remove style-loader

= original answer =

I also encountered this problem. Although I did not report wrong, the link in html became < link href= "[Object object]" / >, how to deal with

Previous: Webpack4 uses style-loader to report window is not defined errors

Next: The interaction between the front-end ajax and the computationally expensive php will throw unexpected results.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu