Sometimes can't reload in a react-router app

[cpunion]

Smoothly migrated to create-react-app, but it has a problem. sometimes it raises a warning and can't reload.

It works fine with express.js, webpack-hot-middleware and webpack-dev-middleware.

[gaearon]

Create React App does not support hot module replacement for anything other than CSS. Did you copy and paste some code with module.hot into your project?

[cpunion]

Yes, I found it. My project clone from react-redux-starter-kit, the code about hot reloading is https://github.com/davezuko/react-redux-starter-kit/blob/master/src/main.js#L57-L84 .

I removed that block, seems solved this problem.

Thanks!

[gaearon]

This project has no relation to that starter kit.
Give Create React App a try, maybe you won't need starter kits anymore 😉

[cpunion]

Already used create-react-app, it's great.

My project cloned from react-redux-starter-kit a few months ago, and used that starter-kit's boot code in src folder to initialize react/redux etc.. Yesterday I created new project structure with create-react-app, and used code, then the problem happened.

Now it works fine, and project is very clean, love this. Just waiting for Hot Module Reload, then it's perfect.

Thanks again for your great work.

[cpunion]

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

client:46 [WDS] Errors while compiling.
client:48   ReferenceError: window is not defined

  - addStyles.js?:14 eval
    /Users/lijie/source/applean/applean-web-new/~/react-scripts/~/style-loader/addStyles.js?:14:30

  - addStyles.js?:9 eval
    /Users/lijie/source/applean/applean-web-new/~/react-scripts/~/style-loader/addStyles.js?:9:47

  - addStyles.js?:31 module.exports
    /Users/lijie/source/applean/applean-web-new/~/react-scripts/~/style-loader/addStyles.js?:31:68

  - pace-theme-minimal.css?:7 eval
    /Users/lijie/source/applean/applean-web-new/src/static/pace/theme/pace-theme-minimal.css?:7:101

  - index.html:561 Object.<anonymous>
    /Users/lijie/source/applean/applean-web-new/index.html:561:2

  - index.html:519 __webpack_require__
    /Users/lijie/source/applean/applean-web-new/index.html:519:30

  - index.html:50 fn
    /Users/lijie/source/applean/applean-web-new/index.html:50:20

  - loader.js:1 eval
    /Users/lijie/source/applean/applean-web-new/index.html?./~/react-scripts/~/html-webpack-plugin/lib/loader.js:1:497

  - index.html:552 Object.<anonymous>
    /Users/lijie/source/applean/applean-web-new/index.html:552:2

  - index.html:519 __webpack_require__
    /Users/lijie/source/applean/applean-web-new/index.html:519:30

  - From previous event:

  - index.js:108 Compiler.<anonymous>
    [applean-web-new]/[react-scripts]/[html-webpack-plugin]/index.js:108:8

  - Tapable.js:71 Compiler.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:71:13

  - Compiler.js:226 Compiler.emitAssets
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:226:7

  - Compiler.js:54 Watching.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:54:18

  - Compiler.js:403 
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:403:12

  - Tapable.js:67 Compiler.next
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:67:11

  - CachePlugin.js:40 Compiler.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/CachePlugin.js:40:4

  - Tapable.js:71 Compiler.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:71:13

  - Compiler.js:400 Compiler.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:400:9

  - Compilation.js:577 Compilation.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compilation.js:577:13

  - Tapable.js:60 Compilation.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:572 Compilation.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compilation.js:572:10

  - Tapable.js:60 Compilation.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:567 Compilation.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compilation.js:567:9

  - Tapable.js:60 Compilation.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:563 Compilation.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compilation.js:563:8

  - Tapable.js:60 Compilation.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:525 Compilation.seal
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compilation.js:525:7

  - Compiler.js:397 Compiler.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:397:15

  - From previous event:

  - index.js:55 Compiler.<anonymous>
    [applean-web-new]/[react-scripts]/[html-webpack-plugin]/index.js:55:8

  - Tapable.js:107 Compiler.applyPluginsParallel
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:107:14

  - Compiler.js:394 Compiler.compile
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:394:7

  - Compiler.js:46 Watching.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:46:17

  - Tapable.js:67 Compiler.next
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:67:11

  - middleware.js:80 Compiler.invalidAsyncPlugin
    [applean-web-new]/[react-scripts]/[webpack-dev-middleware]/middleware.js:80:3

  - Tapable.js:71 Compiler.applyPluginsAsync
    [applean-web-new]/[react-scripts]/[tapable]/lib/Tapable.js:71:13

  - Compiler.js:44 Watching._go
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:44:16

  - Compiler.js:108 Watching.invalidate
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:108:8

  - Compiler.js:93 Watching.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/Compiler.js:93:8

  - NodeWatchFileSystem.js:43 NodeWatchFileSystem.<anonymous>
    [applean-web-new]/[react-scripts]/[webpack]/lib/node/NodeWatchFileSystem.js:43:3

  - watchpack.js:121 EventEmitter._onTimeout
    [applean-web-new]/[react-scripts]/[watchpack]/lib/watchpack.js:121:7

errors @ client:48sock.onmessage @ client:82EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35
client:90 [WDS] App hot update...

Content of index.html:

...
<link href="./src/static/pace/theme/pace-theme-minimal.css" rel="stylesheet" />
<script src="./src/static/pace/pace.js"></script>
...

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

[gaearon]

Can you please create a new issue about this with an example (preferably on GH) reproducing the problem? Thanks.

[cpunion]

@gaearon Created: #625