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

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

[cloudmu]

• CRA 0.4.1 doesn't support serving local static assets like you did in index.html. See Related: version 0.4.1 serves non-HTML files as text/html #573 Disable implicit serving of the source files #551. So remove the links (css and js) from your index.html.
• pace-js relies on pace. Unfortunately the pace-js doesn't attempt to require pace although both are on npm. Note this is also very confusing due to the unfortunately very similar package names. So in your package.json you need to add "pace": "^0.0.4" explicitly.
• And, add the following in your index.js:

import 'pace-js/themes/blue/pace-theme-minimal.css';
import 'pace-js';

[fson]

@cloudmu is right, the right way to include it would be importing in index.js However, it seems that even though pace-js is published on npm, it can't currently be loaded as a module (which is a bummer). The reason is that it has an invalid AMD define in its source, which defines pace as a dependency (pace on npm is an unrelated command line tool, not actually used by pace-js). So while installing pace seems to fix the problem, it also pulls in some code from a package that is not used.

The best solution would be to fix Pace so that it can be imported normally without depending on a different pace package. There's an issue in the Pace repo: CodeByZach/pace#328

Another workaround would be to use it from a CDN, which you can add to index.html:

    <link href="https://unpkg.com/pace-js/themes/blue/pace-theme-minimal.css" rel="stylesheet" />
    <script src="https://unpkg.com/pace-js@1.0.2/pace.min.js"></script>

However, it's possible and likely that your app loads faster with the method described above (import) because then the script and styles can be bundled with your app's code and loaded with a single roundtrip to the server.

[gaearon]

I think the author wants to avoid imports and bundling intentionally because the sole reason pace exists is to show a progress bar while the rest of the content is loading.

[gaearon]

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.

[cloudmu]

@fson thanks for pointing out pace is an unintended dependency (bug in pace-js).

[cpunion]

Thanks @cloudmu, @fson . I will temporarily link it from CDN.

@gaearon thanks for adding to 1.0.0 milestone.

[bestwestern]

I would very much hate to lose this!
'CRA 0.4.1 doesn't support serving local static assets like you did in index.html. '
(I will be forced to use older version - I am using webpack without cssloader in a parent folder to do builds to a wwwroot folder.. I am not very good with webpack so the create-react-app is great but I need to be able serve local statis assets)
How would I make it possible after an eject?
Serving a lot of static files would make development with create-react-app very slow?

[gaearon]

I drafted a proposal to solve this in #703. Unless we find some fatal flaws, it should come out in 0.5.0. Let me know what you think!

[cpunion]

@gaearon Great!

[gaearon]

Closing as this is fixed, and will be released in 0.5.0.