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
- Fix InterpolateHtmlPlugin only replacing the first occurrence Fixes https://github.com/facebookincubator/create-react-app/issues/625#issuecomment-249320724. — committed to fson/create-react-app by fson 8 years ago
- Fix InterpolateHtmlPlugin only replacing the first occurrence (#731) Fixes https://github.com/facebookincubator/create-react-app/issues/625#issuecomment-249320724. — committed to facebook/create-react-app by fson 8 years ago
- Fix InterpolateHtmlPlugin only replacing the first occurrence (#731) Fixes https://github.com/facebookincubator/create-react-app/issues/625#issuecomment-249320724. — committed to feiqitian/create-react-app by fson 8 years ago
- Fix InterpolateHtmlPlugin only replacing the first occurrence (#731) Fixes https://github.com/facebookincubator/create-react-app/issues/625#issuecomment-249320724. — committed to eagerdev12/creating-app by eagerdev12 8 years ago
- Fix InterpolateHtmlPlugin only replacing the first occurrence (#731) Fixes https://github.com/facebookincubator/create-react-app/issues/625#issuecomment-249320724. — committed to sven3270350/react-typescript by sven3270350 8 years ago
- Fix InterpolateHtmlPlugin only replacing the first occurrence (#731) Fixes https://github.com/facebookincubator/create-react-app/issues/625#issuecomment-249320724. — committed to OrdinalKing/create-react-app-ts-redux-saga-mui by fson 8 years ago
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.