bvic23 / babel-plugin-functional-hmr Goto Github PK

When running in React Native 0.53 this package causes an error requiring unknown module "react". Not sure what could be causing this.

Hi! I've experienced a bug.

Here's an example of the component not being rendered correctly:

Correct rendering:

code:

import React from 'react';
import { View, Text, Image} from 'react-native';
import arrow from '../../../../res/arrow-up/arrow-up.png';

const Item = ({ title, info }) => (
  <View>
    <Text>{title}</Text>
    <Text >{info}</Text>
    <Image source={arrow} />
  </View>
);

export default Item;

To reproduce:

1. Run above code with HMR on
2. Exit the app
3. Open it again
4. Component should render incorrectly (like on 1st screen)
5. Force save the component file
6. 'Hot loading...' badge will appear on the screen and component will be rerendered. It will now look like on 2nd screen

What also helps:

1. Renaming component to anything but 'Item'
2. Removing functional-hmr from .babelrc :)
3. And changing the code so it does not save component to 'Item' variable:

export default ({ title, info }) => (
  <View>
    <Text>{title}</Text>
    <Text >{info}</Text>
    <Image source={arrow} />
  </View>
);

Hello,

I created a fresh 0.57.7 react-native iOS project and installed the plugin (1.0.24).
I did yarn start --reset-cache and enabled Hot reloading.
When updating a functional component, the "hot loading" message appears,
but the changes don't show up.

My .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["functional-hmr"]
}

My App.js

export default function App() {
  return <Text>foo</Text>;
}

Thanks for building this plugin. It really helps to overcome the annoying scenario that only classes benefit from hot reloading capabilities.

I identified one problem when bundling the app for Android though. While performing a cd android && ./gradlew assembleRelease the build fails with:

Loading dependency graph, done.
warning: the transform cache was reset.

SyntaxError: Unexpected token: name (id)

:app:bundleReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 1

Removing the plugin configuration in .babelrc helps and the build succeeds again.

Hi! Now that React Native 0.61 fixes the problem with Fast Refresh, it would be great if this project could have a loud deprecation notice in README.

The transform it's doing is not safe because it changes functions into classes. It's also making the code slower because the function codepath is more optimized in React.

Thank you!

With this plugin, some of the tests are breaking with the following message:

locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

When I debug the tests, I find that those tests are testing shallow rendering for some components which include imported components from react-native like the ActivityIndicator component.

I'm using Babel7 and this is my config:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-class-properties'],
    ['@babel/plugin-proposal-object-rest-spread'],
    ['@babel/plugin-transform-runtime'],
    [
      'babel-plugin-transform-builtin-extend',
      {
        globals: ['Error'],
      },
    ],
    ['functional-hmr'],
  ],
};

Using RN 57.1 and node 8.12.0

And these are all the babel plugins:

    "@babel/core": "7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-plugin-functional-hmr": "^1.0.24",
    "babel-plugin-transform-builtin-extend": "^1.1.2",
    "babel-plugin-transform-remove-console": "^6.9.4",

So I disabled HMR during tests by adding NODE_ENV=TEST and changing babel config to only add HMR in development.

Is this the right approach? or am I missing something?
Also any idea why the tests are failing to begin with after enabling this plugin?

Thanks 💯

A pattern that I tend to use is the following:

import React from 'react';
import { withState } from 'recompose'; // or any of the HOCs from recompose

const enhancer = withState('value', 'setValue', 0);
const MyComponent = ({ value, setValue }) => (
  <div>
    <span>Value: {String(value)}</span>
    <button onClick={() => setValue(value + 1)}>Increment</button>
  </div>
);
export default enhancer(MyComponent);

Because MyComponent is not being exported as a const or default, it is not being picked up by babel-plugin-functional-hmr.

Is there a way I can adjust my pattern or is there something that could be done regarding babel-plugin-functional-hmr to get this experience working with HMR?

For storybook it looks like packager doesn't find it. Maybe just a small thing? Do you know the reason?

This is in a brand new app and brand new install of storybook

ERROR in ./storybook/addons.js
Module build failed: Error: Couldn't find preset "functional-hmr" relative to directory "/Users/myuser/Documents/Investegy/storybook"
    at /Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/myuser/Documents/Investegy/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/myuser/Documents/Investegy/node_modules/babel-loader/lib/index.js:49:20)
 @ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

I believe there is an issue with how this package detects if a function returns JSX.

HMR does not detect changes on a component that returns a fragment using babel syntax <></>

HMR doesn't see changes here

const ExampleScreen = () => (
  <>
    <View style={{ backgroundColor: 'red', height: '100%' }} />
  </>
);

This works fine

const ExampleScreen = () => (
  <React.Fragment>
    <View style={{ backgroundColor: 'red', height: '100%' }} />
  </React.Fragment>
);

Hello.

After upgrade react-native (0.52.0) I receive this error: Unknown named module: 'react'

Steps to Reproduce

• Create new proj via react-native init
• Install this plugin
• Important! Change file App.js:

const App = () => (
  <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
)

export default App

Just run react-native run-ios

how tough could it be to support hyperscript or plain React.createElement calls?

I somehow can't get this plugin to work. I'm tryin to use it with storybook. I'm not getting any errors, but the HMR isn't working either. Is there any way to check wether the plugin actually does it's transforms?

Just a notice. Since this is actually transforming functional components to classes (as I understand it). If you try to use hooks in your source they won't work (you will get an "Hooks can only be called inside the body of a function component").

This is ofcourse "by design" when using this plugin.

Maybe update the readme with a notice regarding this so others won't get their hopes up (like me) that you can use functional compoents, hooks AND hot reloading in your React Native apps...