Doesn't seem to work with React >= 0.13 + JSX + ES6

pm5 commented 9 years ago

One of our projects used React 0.13.1 with JSX and ES6. When building metalsmith the following warning was raised:

Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform. .../build.es6:34 if (err) throw err; ^ Error: Invariant Violation: renderToString(): You must pass a valid ReactElement. at invariant (.../node_modules/metalsmith-react-templates/node_modules/react/lib/invariant.js:42:15) at Object.renderToString (.../node_modules/metalsmith-react-templates/node_modules/react/lib/ReactServerRendering. js:28:44) at renderReactTemplate (.../node_modules/metalsmith-react-templates/lib/index.js:73:42) ...

Downgrade to React 0.12.x and everything was fine.

This is probably because in React 0.13, if you use JSX you must not wrap the component with React.createFactory(). But I am not 100% sure if this was the cause.

jamiecollinson commented 9 years ago

I can confirm - I also had the same issue. Downgrading to React 0.12.2 (as in the example) fixed for me.

yeojz commented 9 years ago

Will look into this and try and reproduce it.

One clarification though... Are the file extensions .jsx or is it something else? I noticed the snippet above was using build.es6

If anyone has a fix feel free to share as well.

@pm5 I noticed you added a requireIgnore for webpack as well. Is that a common issue also?

jamiecollinson commented 9 years ago

I don't know about @pm5 but I was using .jsx extensions for templates.

yeojz commented 9 years ago

@pm5 and @jamiecollinson

I've updated the dependencies and the component creation process in upgrade-react-0.13 branch. I've added babel transformation option to allow better es6 support as well.

Would be great if you guys can try it out and see if it fixes your issues.

Thanks

yeojz commented 9 years ago

Changes released in v0.2.0

yeojz / metalsmith-react-templates

Doesn't seem to work with React >= 0.13 + JSX + ES6 #3