setup help about babel-plugin-functional-hmr HOT 7 CLOSED

Could you attach your package.json, .babelrc and the functional component you'd like to use in storyboard? Could you also verify that HMR is enabled in the simulators/emulator?

from babel-plugin-functional-hmr.

Hi thanks a lot for the help. So everything is pretty standard:

package.json

{
   ...
  "dependencies": {
    ...
    "react": "16.0.0-alpha.12",
    "react-native": "0.47.2",
    "styled-components": "^2.1.1"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.2.11",
    "@storybook/addon-links": "^3.2.10",
    "@storybook/react-native": "^3.2.11",
    "babel-eslint": "^7.2.3",
    "babel-plugin-functional-hmr": "^1.0.21",
    "babel-plugin-transform-react-jsx-source": "^6.22.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "lint-staged": "^4.0.3",
    "react-dom": "16.0.0-alpha.12",
    "react-native-dotenv": "^0.1.0",
    "react-native-scripts": "^1.1.0",
    "react-test-renderer": "16.0.0-alpha.12",
    ...
  },
  "rnpm": {
    "assets": [
      "./cinuru-design/assets/fonts/"
    ]
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ]
  }
}

.babelrc

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support", "react-native-dotenv"],
  "env": {
    "development": {
      "plugins": ["functional-hmr", "transform-react-jsx-source"]
    }
  }
}

HMR is definitely enabled and it works with classes as well. I'm just having the automatically set up components from storybook. the Welcome is a class and works fine. But the Button is a functional component and it doesn't change.

from babel-plugin-functional-hmr.

Is there any way to see in the react native debugger wether the component actually got transformed?

from babel-plugin-functional-hmr.

Ok, I think I got it to work. The problem is, that editing the .babelrc won't actually change the setup, unless you start the packager with yarn start --reset-cache to clean the transform cache. Super confusing, cost me several hours.

from babel-plugin-functional-hmr.

Sorry for the inconvenience and thanks for getting back. I had a busy week I planned to fix tonight! Anyway I've updated the readme with your finding! Thanks.

from babel-plugin-functional-hmr.

I found out why cache reset did not come into my mind: RN packager is so different from React's webpack whenever I have any trouble (warnings, red screens, missing transforms) I immediately run the following script before debugging:

#!/bin/sh
rm -rf node_modules/
yarn install
watchman watch-del-all
rm -rf $TMPDIR/react-*

from babel-plugin-functional-hmr.

Yes it’s really f* up, so much undeterministic behavior. I really love React Native, but the dev experience is so much worse as compared to web. I’ll copy your script!

from babel-plugin-functional-hmr.