Skip to content

Sometimes can't reload in a react-router app #622

New issue
New issue
Closed
Closed
Sometimes can't reload in a react-router app#622
Labels
issue: proposal
@cpunion

Description

@cpunion
cpunion
opened on Sep 10, 2016

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

image

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

Activity

gaearon

gaearon commented on Sep 10, 2016

@gaearon
gaearon
on Sep 10, 2016
Contributor

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?

gaearon
added
issue: proposal
on Sep 10, 2016
cpunion

cpunion commented on Sep 11, 2016

@cpunion
cpunion
on Sep 11, 2016
Author

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!

cpunion
closed this as completedon Sep 11, 2016
gaearon

gaearon commented on Sep 11, 2016

@gaearon
gaearon
on Sep 11, 2016
Contributor

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

cpunion

cpunion commented on Sep 11, 2016

@cpunion
cpunion
on Sep 11, 2016
Author

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

cpunion commented on Sep 11, 2016

@cpunion
cpunion
on Sep 11, 2016
Author

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

gaearon commented on Sep 11, 2016

@gaearon
gaearon
on Sep 11, 2016
Contributor

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

cpunion

cpunion commented on Sep 11, 2016

@cpunion
cpunion
on Sep 11, 2016
Author

@gaearon Created: #625

lock
locked and limited conversation to collaborators on Jan 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue: proposal

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @cpunion@gaearon

        Issue actions
          Sometimes can't reload in a react-router app · Issue #622 · facebook/create-react-app