Skip to content

Link css in index.html, ReferenceError: window not defined #625

@cpunion

Description

@cpunion

I used pace.js to got a better loading experience, but it can't be linked in index.html, some errors raised:

Html Webpack Plugin: ReferenceError: window is not defined - addStyles.js?:14 eval /Users/lijie/test/react/Third/~/react-scripts/~/style-loader/addStyles.js?:14:30 - addStyles.js?:9 eval /Users/lijie/test/react/Third/~/react-scripts/~/style-loader/addStyles.js?:9:47 - addStyles.js?:31 module.exports /Users/lijie/test/react/Third/~/react-scripts/~/style-loader/addStyles.js?:31:68 - pace-theme-minimal.css?:7 eval /Users/lijie/test/react/Third/~/pace-js/themes/blue/pace-theme-minimal.css?:7:96 - index.html:570 Object. /Users/lijie/test/react/Third/index.html:570:2 - index.html:519 __webpack_require__ /Users/lijie/test/react/Third/index.html:519:30 - index.html:50 fn /Users/lijie/test/react/Third/index.html:50:20 - loader.js:1 eval /Users/lijie/test/react/Third/index.html?./~/react-scripts/~/html-webpack-plugin/lib/loader.j s:1:294 - index.html:552 Object. /Users/lijie/test/react/Third/index.html:552:2 - index.html:519 __webpack_require__ /Users/lijie/test/react/Third/index.html:519:30 - From previous event: - index.js:108 Compiler. [Third]/[react-scripts]/[html-webpack-plugin]/index.js:108:8 - Tapable.js:71 Compiler.applyPluginsAsync [Third]/[react-scripts]/[tapable]/lib/Tapable.js:71:13 - Compiler.js:226 Compiler.emitAssets [Third]/[react-scripts]/[webpack]/lib/Compiler.js:226:7 - Compiler.js:54 Watching. [Third]/[react-scripts]/[webpack]/lib/Compiler.js:54:18 - Compiler.js:403 [Third]/[react-scripts]/[webpack]/lib/Compiler.js:403:12 - Tapable.js:67 Compiler.next [Third]/[react-scripts]/[tapable]/lib/Tapable.js:67:11 - CachePlugin.js:40 Compiler. [Third]/[react-scripts]/[webpack]/lib/CachePlugin.js:40:4 - Tapable.js:71 Compiler.applyPluginsAsync [Third]/[react-scripts]/[tapable]/lib/Tapable.js:71:13 - Compiler.js:400 Compiler. [Third]/[react-scripts]/[webpack]/lib/Compiler.js:400:9 - Compilation.js:577 Compilation. [Third]/[react-scripts]/[webpack]/lib/Compilation.js:577:13 - Tapable.js:60 Compilation.applyPluginsAsync [Third]/[react-scripts]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:572 Compilation. [Third]/[react-scripts]/[webpack]/lib/Compilation.js:572:10 - Tapable.js:60 Compilation.applyPluginsAsync [Third]/[react-scripts]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:567 Compilation. [Third]/[react-scripts]/[webpack]/lib/Compilation.js:567:9 - Tapable.js:60 Compilation.applyPluginsAsync [Third]/[react-scripts]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:563 Compilation. [Third]/[react-scripts]/[webpack]/lib/Compilation.js:563:8 - Tapable.js:60 Compilation.applyPluginsAsync [Third]/[react-scripts]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:525 Compilation.seal [Third]/[react-scripts]/[webpack]/lib/Compilation.js:525:7 - Compiler.js:397 Compiler. [Third]/[react-scripts]/[webpack]/lib/Compiler.js:397:15 

Content of index.html:

... <link href="./node_modules/pace-js/themes/blue/pace-theme-minimal.css" rel="stylesheet" /> <script src="./node_modules/pace-js/pace.min.js"></script> ... 

Pace.js must be loaded quickly, shouldn't require it in project's code.

A project can reproduce:
https://github.com/cpunion/CRA-window-not-defined

Related commit:
cpunion/CRA-window-not-defined@2ad61c7

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions