gaearon / react-hot-loader

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)
http://gaearon.github.io/react-hot-loader/
MIT License
12.26k stars 801 forks source link

My component doesn't recognize the new description method and doesn't keep states except root component #1182

Open ghost opened 5 years ago

ghost commented 5 years ago

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

My component doesn't recognize the new description method and doesn't keep states except root component. Instead, it worked when I described old style(export default hot(module)(App)). However, my components didn't keep states except a component that I declared hot.

×

 import { hot } from 'react-hot-loader/root'
const App = () => <div>Hello World!</div>
export default hot(App)

import { hot } from 'react-hot-loader'
const App = () => <div>Hello World!</div>
export default hot(module)(App)

Expected behavior

What you think should happen: My root component should accept the new description. Keep states when I modify any other components.

Actual behavior

What actually happens: My root component recognized old description method.

Environment

React Hot Loader version:4.6.5

Run these commands in the project folder and fill in their results:

  1. node -v: 10.15.0
  2. npm -v: 6.4.1

Then, specify:

  1. Operating system: Windows 10 Pro ver1803 17134.590
  2. Browser and version: Google Chrom ver: 71.0.3578.98(Official Build) (64bit)

Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.

theKashey commented 5 years ago

Is it webpack based?

ghost commented 5 years ago

Is it webpack based?

Yes, ver 4.29.3 This is my package.json

` { "name": "webpackori", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "webpack-dev-server --hot --mode development --open | json-server --watch db.json ", "build": "webpack --config webpack.config.js", "eslint": "eslint \"src/*/.{js,jsx}\"", "stylelint": "stylelint src/*/." }, "dependencies": { "axios": "^0.18.0", "react": "^16.8.1", "react-dom": "^16.8.1" }, "devDependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.5", "css-loader": "^2.1.0", "eslint": "^5.13.0", "eslint-config-airbnb": "^17.1.0", "eslint-config-prettier": "^4.0.0", "eslint-plugin-import": "^2.16.0", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "husky": "^1.3.1", "json-server": "^0.14.2", "lint-staged": "^8.1.3", "node-sass": "^4.11.0", "prettier": "1.16.4", "react-hot-loader": "^4.6.5", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "stylelint": "^9.10.1", "stylelint-config-prettier": "^4.0.0", "stylelint-config-standard": "^18.2.0", "stylelint-prettier": "^1.0.6", "stylelint-scss": "^3.5.3", "url-loader": "^1.1.2", "webpack": "^4.29.3", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.1.14" }, "resolutions": { "ajv": "6.8.1" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { ".{js,jsx}": [ "eslint", "git add" ], "*.{css,scss}": [ "stylelint", "git add" ] } }

`

ghost commented 5 years ago

This is my repository that I'm using RHL.

https://github.com/astatsuya/webpackori