Hot reloading isn't working as expected

Describe the bug I can wrap every single component export in hot(module)(MyComponent) and it works. If I don’t (i.e. if I just wrap my outermost App component), then hot reloading doesn’t work.

To Reproduce Steps to reproduce the behavior:

1. yarn add global react-static
2. react-static create
3. Select Emotion example
4. Create a simple component and try to update its styles

Expected behavior Styles hot reload

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome

Additional context I’m using the latest versions of react-static and react-hot-loader as mentioned here: https://github.com/nozzle/react-static/issues/397

It’s possible my extending of the Babel config is causing the issue:

// .babelrc
{
  "extends": "react-static/.babelrc",
  "env": {
    "production": {
      "plugins": [["emotion", { "sourceMap": false }]]
    },
    "development": {
      "plugins": [
        ["emotion", { "sourceMap": true, "labelFormat": "[filename]--[local]" }]
      ]
    }
  }
}

// package.json
{
  "scripts": {
    "start": "NODE_ENV=development react-static start",
    "stage": "react-static build --staging",
    "build": "NODE_ENV=production react-static build",
    "serve": "serve dist -p 3000"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/pro-light-svg-icons": "^5.5.0",
    "@fortawesome/pro-regular-svg-icons": "^5.5.0",
    "@fortawesome/pro-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "axios": "^0.16.2",
    "emotion": "^9.2.12",
    "polished": "^2.3.0",
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "react-emotion": "^9.2.12",
    "react-router": "^4.3.1",
    "react-static": "^5.9.12"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-pro": "^5.5.0",
    "babel-plugin-emotion": "^9.2.4",
    "emotion-server": "^9.2.12",
    "eslint-config-react-tools": "^1.1.6",
    "prop-types": "15.x",
    "react-hot-loader": "^4.3.12",
    "serve": "^6.1.0"
  },
  "private": true
}

[Pixelatex]

Hey @corysimmons I looked into it and seems like a fix is to change your .babelrc to include the hot reload module.

{
  "extends": "react-static/.babelrc",
  "plugins": ["babel-plugin-emotion",
    "react-hot-loader/babel"]
}

For me it worked 😃 Can you give it a try? + you should only need to hot() in the app.js, not on your components.

[corysimmons]

Maybe the react-static create is targetting an older version of the Emotion template? 🤔