create-react-app: Link css in index.html, ReferenceError: window not defined

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: https://github.com/cpunion/CRA-window-not-defined/commit/2ad61c7177d96750fcc67b3ed30beb1c9e0e2b49

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 20 (13 by maintainers)

Commits related to this issue

Most upvoted comments

I’d like to keep this open because this is one of use cases we should make sure we have a reasonable way of supporting before 1.0.