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

Created on 11 Sep 2016  ·  20Comments  ·  Source: facebook/create-react-app

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

picture cpunion

Most helpful comment

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.

picture gaearon on 11 Sep 2016
👍3

All 20 comments

  • CRA 0.4.1 doesn't support serving local static assets like you did in index.html. See Related: #573 #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';
cloudmu picture cloudmu on 11 Sep 2016

@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: https://github.com/HubSpot/pace/issues/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/[email protected]/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.

fson picture fson on 11 Sep 2016

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 picture gaearon on 11 Sep 2016

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.

gaearon picture gaearon on 11 Sep 2016
👍3

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

cloudmu picture cloudmu on 11 Sep 2016

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

@gaearon thanks for adding to 1.0.0 milestone.

cpunion picture cpunion on 12 Sep 2016

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?

bestwestern picture bestwestern on 14 Sep 2016

I drafted a proposal to solve this in https://github.com/facebookincubator/create-react-app/pull/703. Unless we find some fatal flaws, it should come out in 0.5.0. Let me know what you think!

gaearon picture gaearon on 22 Sep 2016

@gaearon Great!

cpunion picture cpunion on 23 Sep 2016

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

gaearon picture gaearon on 23 Sep 2016

It looks great - can't wait to try it out.
Thank you.

bestwestern picture bestwestern on 23 Sep 2016

This is now supported in 0.5.0.

Read about using the new public folder.

See also migration instructions and breaking changes in 0.5.0.

gaearon picture gaearon on 23 Sep 2016

@gaearon Thanks for release 0.5.0 so quickly. I migrated to 0.5.0, but found a problem.

Content in my index.html:

  <link href="%PUBLIC_URL%/pace/theme/pace-theme-minimal.css" rel="stylesheet" />
  <script type="text/javascript">
    paceOptions = {ajax: {trackWebSockets: false}};
  </script>
  <script src="%PUBLIC_URL%/pace/pace.js"></script>

It be converted to:

  <link href="/pace/theme/pace-theme-minimal.css" rel="stylesheet" />
  <script type="text/javascript">
    paceOptions = {ajax: {trackWebSockets: false}};
  </script>
  <script src="%PUBLIC_URL%/pace/pace.js"></script>

Seems it just replaces the first %PUBLIC_URL%?

Below is my public folder:

2016-09-23 3 57 45

├── index.html
└── pace
    ├── pace.js
    └── theme
        ├── pace-theme-center-atom.css
        └── pace-theme-minimal.css

Errors in terminal:

URIError: Failed to decode param '/%PUBLIC_URL%/pace/pace.js'
    at decodeURIComponent (native)
    at decode_param (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/layer.js:167:12)
    at Layer.match (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/layer.js:143:15)
    at matchLayer (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:557:18)
    at next (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:216:15)
    at expressInit (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/middleware/init.js:33:5)
    at Layer.handle [as handle_request] (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:312:13)
    at /Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:280:7
    at Function.process_params (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:330:12)
    at next (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:271:10)
    at query (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/middleware/query.js:44:5)
    at Layer.handle [as handle_request] (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:312:13)
    at /Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:280:7
    at Function.process_params (/Users/lijie/project/node_modules/react-scripts/node_modules/express/lib/router/index.js:330:12)
cpunion picture cpunion on 24 Sep 2016

Oops, that might be true. Blame this on me not knowing how replace() works in JS :-P. Would you like to send a fix? It's in InterpolateHtmlPlugin.js in packages/react-dev-utils.

gaearon picture gaearon on 24 Sep 2016

I'm already fixing this :)

fson picture fson on 24 Sep 2016

@fson 👍

cpunion picture cpunion on 24 Sep 2016

Fixed by #731.
0.5.1 will be out shortly.

gaearon picture gaearon on 24 Sep 2016

0.5.1 is out, I just verified this is fixed in it.
https://github.com/facebookincubator/create-react-app/releases/tag/v0.5.1

gaearon picture gaearon on 24 Sep 2016

Fixed, thanks.

A little problem, I migrated from 0.5.0 to 0.5.1 with below command:

$ npm install --save-dev --save-exact [email protected]
[email protected] /Users/lijie/myproject
└── [email protected]

But the version of react-dev-utils in node_modules/react-scripts/node_modules not upgraded, I MUST delete node_modules and then npm i.

cpunion picture cpunion on 24 Sep 2016

That's weird. I guess not a big deal if new projects reference the correct version (I doubt a lot of people had a chance to catch 0.5.0 before 0.5.1 came out.) Will keep this in mind for the future.

gaearon picture gaearon on 24 Sep 2016
Was this page helpful?
0 / 5 - 0 ratings

Related issues

adrice727 picture adrice727  ·  3Comments
Evan-GK picture Evan-GK  ·  3Comments
xgqfrms-GitHub picture xgqfrms-GitHub  ·  3Comments
fson picture fson  ·  3Comments
ap13p picture ap13p  ·  3Comments