Extraction fails with `import React from 'react/addons'

[alunny]

We use higher-order components (see https://github.com/necolas/react-native-web) to handle text styles. Unfortunately, it looks like extractDefaultMessages doesn't extract messages that are nested in React components.

The example below extracts the message Unwrapped but not Wrapped.

class Wrapper extends React.Component {
  render() {
    return <span style={{color: 'white'}}>{this.props.children}</span>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <p><FormatMessage>Unwrapped</FormatMessage></p>
      <p><Wrapped><FormatMessage>Wrapped</FormatMessage></Wrapped></p>
    </div>
  }
}

I can have a look today unless this is an easy fix for you.

[rxaviers]

It worked for me on a quick test (below). Maybe, I am missing something...

$ node
> var babel = require("babel")
> var esprima = require("esprima");
> index.extractDefaultMessages(esprima.parse(babel.transform(fs.readFileSync("test.js")).code))
{ Unwrapped: 'Unwrapped',
  Wrapped: 'Wrapped' }

PS: where test.js has the content of the example from your description.

[alunny]

Hm - let me try to get a better repro case.

[alunny]

Okay, my issue description was wrong :)

Turns out the problem was with using React from react/addons instead of react.

eg. this works

class Application extends React.Component {
  render() {
    return <div>
      <p><FormatMessage>Unwrapped</FormatMessage></p>
    </div>
  }
}

and

import React from 'react';

class Application extends React.Component {
  render() {
    return <div>
      <p><FormatMessage>Unwrapped</FormatMessage></p>
    </div>
  }
}

but not

import React from 'react/addons';

class Application extends React.Component {
  render() {
    return <div>
      <p><FormatMessage>Unwrapped</FormatMessage></p>
    </div>
  }
}