React native build breaks about babel-plugin-flow-react-proptypes HOT 22 CLOSED

Cool, that seems to have addressed that issue. Thanks! I get another issue running the packager now though:

SyntaxError: Unexpected token, expected , (205:260)
    at Parser.pp$5.raise (/path/to/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp.unexpected (/path/to/node_modules/babylon/lib/index.js:1627:8)
    at Parser.pp.expect (/path/to/node_modules/babylon/lib/index.js:1615:33)
    at Parser.pp$2.parseBindingList (/path/to/node_modules/babylon/lib/index.js:2934:12)
    at Parser.pp$1.parseFunctionParams (/path/to/node_modules/babylon/lib/index.js:2260:22)
    at Parser.pp$1.parseFunction (/path/to/node_modules/babylon/lib/index.js:2250:8)
    at Parser.pp$3.parseFunctionExpression (/path/to/node_modules/babylon/lib/index.js:3596:17)
    at Parser.pp$3.parseExprAtom (/path/to/node_modules/babylon/lib/index.js:3558:19)
    at Parser.pp$3.parseExprSubscripts (/path/to/node_modules/babylon/lib/index.js:3331:19)
    at Parser.pp$3.parseMaybeUnary (/path/to/node_modules/babylon/lib/index.js:3311:19)
transformed 192/362 (53%)/path/to/node_modules/babylon/lib/index.js:4249
  throw err;
  ^

If I comment out targetPath.insertAfter(attachPropTypesAST); in at

from babel-plugin-flow-react-proptypes.

I figured a good place to start debugging it would be where babylon throws that error, namely the unexpected method. I added this.input to the error message, and saw that the error is being thrown when going over React Native's SwipeableListView component.

I verified that this is the issue by modifying the Props type to be type Props = Object;, and the error indeed disappeared.

(Of course, it's possible that in other projects this error is being thrown elsewhere.
So, for everyone else having this issue, I'd suggest changing the message in pp.unexpected in node_modules/babylon/lib/index.js to something along the lines of messageOrType = "Unexpected token, expected " + messageOrType.label + ", when parsing " + this.input;.
That way we can see if the root of the problem is in fact the same file for all of us.)

I'm not sure yet why SwipeableListView is causing this, and what's different about it than all other components. I tried modifying Props by changing all its props' annotations to any, and still the problem persisted, so it seems some other part of the file must be at fault.

At any rate, I imagine someone more familiar with this plugin may have better luck taking it from here, and figuring out what edge case the component contains which causes all this.
If not, tomorrow I'll also try to continue debugging this.

from babel-plugin-flow-react-proptypes.

Having looked into this a bit more, I'm still not sure what causes the problem (not really sure how to easily see the output the plugin produces), but I do seem to have a minimal reduced case:

const React = require('React');
const { View } = React;

type Props = {};

class SwipeableListView extends React.Component {
  constructor(props: Props, context: any) {
    super(props, context);
  }

  componentWillReceiveProps(nextProps: Props) {}

  render(): React.Element<any> { return <View />; }

  _renderRow = () => <View />;
}

module.exports = SwipeableListView;

Looks like removing any of these parts (constructor, _renderRow as a class property, Props type) makes the problem disappear.
The only exception is componentWillReceiveProps: if that part is removed, there's still a very similar error, except instead of Unexpected token, expected ,, the error becomes Unexpected token, expected {.

Update:

Figured out how to actually look at the plugin output, and the problematic part apparently looks something like this:

    var _this = _possibleConstructorReturn(this, (
      SwipeableListView.__proto__ || Object.getPrototypeOf(SwipeableListView)
    ).call(this, props, context));

    _this._renderRow = function () {
      return React.createElement(View, null);
    };

    return _this;
  }

  _createClass(SwipeableListView, [
    {
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps (nextProps : Props) {},
    },
    {
      key: 'render',
      value: function render(): React.Element < any > {
        return <View />;
      },
    },
  ]);

So, it looks like the code inside _createClass is for some reason not being processed correctly.
As mentioned, this only happens when the class has a constructor and a class property (in this case, _renderRow). Removing either the constructor or _renderRow produces rather different transpiled code, but in both cases the JSX and the Flow types are properly stripped.
In fact, even just changing _renderRow so it doesn't return JSX fixes the problem.

(If it helps, I can attach the snippets produced in all aforementioned cases, which do not throw any errors.)

Again, I'm not very familiar with this plugin's code, so it would be somewhat of a challenge to figure out why the combination of a constructor and a class property returning JSX causes _createClass to be improperly processed.
If @brigand or anyone else fluent in this codebase could have a look, I imagine it should be much simpler for them to figure out why this kind of class breaks the plugin.

from babel-plugin-flow-react-proptypes.

Okay, I think I'm starting to understand now. I'm using the command line tooling to work through it.

Running:

./node_modules/.bin/babel --no-babelrc --plugins syntax-flow,flow-react-proptypes --presets react node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/reconciler/ReactRef.js

Outputs:

// ...
var babelPluginFlowReactPropTypes_proptype_ReactInstance = require('ReactInstanceType').babelPluginFlowReactPropTypes_proptype_ReactInstance || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_ReactElement = require('ReactElementType').babelPluginFlowReactPropTypes_proptype_ReactElement || require('react').PropTypes.any;
var babelPluginFlowReactPropTypes_proptype_Transaction = require('Transaction').babelPluginFlowReactPropTypes_proptype_Transaction || require('react').PropTypes.any;
// ...

Because these have changed to normal require calls, the transform-flow-strip-types plugin that would normally have removed the references completely can't tell. So it leaves them in, causing the problem.

I don't know the best fix, but I can imagine:

• we ignore transforming them, as they're not used, or
• we ignore the file entirely because there are no React components, or
• wrap try/catch to make sure nothing Bad™ happens (defaulting to PropTypes.any as it already does)

from babel-plugin-flow-react-proptypes.

@notjosh give 0.19.0 a try. Thanks for doing all the research on this!

from babel-plugin-flow-react-proptypes.

@Oxyaction do you have any idea what the problem could be? I don't know where to start debugging this.

from babel-plugin-flow-react-proptypes.

@brigand I'll try to make more deep research.

from babel-plugin-flow-react-proptypes.

Our ReactNative build also breaks when using this babel plugin 😢 reference issue: styled-components/styled-components#259

from babel-plugin-flow-react-proptypes.

As far as I can tell, node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/reconciler/ReactReconciler.js is being loaded, but not being stripped of flow types by Babel, so it's looking for a module that Jest hasn't exposed, or some such.

I tried forcing transforms on that (and related) file(s), but I got lost. I'm in over my head with this :)

from babel-plugin-flow-react-proptypes.

(But those same things are loaded just fine if flow-react-proptypes is disabled, so, I guess my initial hunch was wrong. Hmm.)

from babel-plugin-flow-react-proptypes.

It's something in the ImportDeclaration block. If that's commented out, it all works fine. I'll try to investigate that, as it seems reasonable.

from babel-plugin-flow-react-proptypes.

Hmm... if a try/catch would work that seems like the best solution. I'd guess that it won't work because the bundler (webpack?) would still try to resolve the module.

from babel-plugin-flow-react-proptypes.

Yeah, I'm experimenting with that. It throws very angry errors, ha.

from babel-plugin-flow-react-proptypes.

Doesn't seem like having this be catchable is something they want in the runtime environment: facebook/react-native#5079

from babel-plugin-flow-react-proptypes.

@notjosh what about checking if the import path starts with '.' and skipping over it otherwise. That should fix this issue. The only downside is that if you have a third party package that uses this plugin you won't get the prop types, but that seems somewhat unlikely currently.

from babel-plugin-flow-react-proptypes.

I think that's a fair compromise, yeah. It's not perfect, but it's probably the best/simplest we can hope for.

from babel-plugin-flow-react-proptypes.

I'm getting the same error as @notjosh too

from babel-plugin-flow-react-proptypes.

I'm also getting this error:

SyntaxError: Unexpected token, expected , 

trying to use this plugin on React Native.

from babel-plugin-flow-react-proptypes.

Shall we create a new issue for this?

from babel-plugin-flow-react-proptypes.

I'll reopen this, but I have no idea how to debug it.

from babel-plugin-flow-react-proptypes.

Maybe I should create new issue, but my problem comes from non-relative imports, so may be it's related.
I use webpack's resolve.modules array to have paths relative to my source dir. So instead of ../../../types I could just use types. But this break your plugin. Simple hardcoded test:

/* eslint-disable */
const transform = require('babel-core').transform;

const { code } = transform(`
import React, { Component } from 'react';
import type { Data } from 'types';

class Test extends Component {
  props: Data;

  render() {
    return (
      <div>{this.props.id} {this.props.title}</div>
    );
  }
}

export default Test;
`, {
	babelrc: false,
	presets: ['es2015', 'stage-2', 'react'],
	plugins: [
		[ "module-resolver", { "root": [ "." ] } ],
		'flow-react-proptypes',
	],
});

console.log(code);

Error: unknown: Did not find type annotation for Test

And it works if I use import type { Data } from './types'.

I tried to use babel-plugin-module-resolver, but it didn't help.

How do you deal with such paths? Could you use babel's paths resolver (affected by module-resolver plugin as I think)?

Thanks!

from babel-plugin-flow-react-proptypes.

@hlomzik it seems to be fixed. Published as v2.0.0 because this is probably going to break something somewhere. Please test it and let me know.

from babel-plugin-flow-react-proptypes.