Create-react-app: Production build breaks code that works in development

[modernserf]

import React from "react"

export default class App extends React.Component {
  render() {
    return (
      <div>
        <p>Parent</p>
        <AppItem />
      </div>
    )
  }
}

const AppItem = () => {
    return <div>child</div>
}

Works with npm start
Breaks with npm build, giving Element type is invalid error

If you rearrange the code so that AppItem is defined before App (or you use a hoisted function declaration) it works in both environments.

I suspect this has something to do with the react inline elements transformer?

[fbarrailla]

It seems to be because of babel-plugin-transform-react-constant-elements

[gaearon]

@hzoo Does this look like a Babel bug to you? Worth filing an issue?

[hzoo]

Yeah seems like it, can look at it later - looks like https://phabricator.babeljs.io/T6878, https://phabricator.babeljs.io/T7126

[sebmck]

I can fix this.

[sebmck]

I fixed this. babel/babel#3596

[gaearon]

🐈

[sebmck]

PR merged. I guess this can be closed.

[gaearon]

We pin versions so I’d like to leave it open for posterity until we pin to the version fixing this.

[sebmck]

The fix is in a transitive dependecy so users will get the updated version regardless and you have no version to update as it's not a direct dependency.

[gaearon]

We use bundledDependencies, I’m not sure whether this complicates the issue or not..

[insin]

Seems like having to watch your deps more closely and releasing more often to get dep fixes out might be an implicit tradeoff for the single download and version stability from deduping and bundling _all_ your deps.

Just did a fresh install of react-scripts and got exactly what was bundled:

https://npmcdn.com/[email protected]/node_modules/babel-runtime/package.json

[hzoo]

Released v6.12.0 with this fix https://github.com/babel/babel/releases/tag/v6.12.0 (and like @kittens said it's a fix in the babel-traverse pkg)

[gaearon]

Thank you so much! I’ll be using these for next release.
Since we can’t pin a transitive anyway (lol I don’t know npm), I’m closing.

[gaearon]

This should be fixed in latest alpha. Please give it a try and let us know. https://github.com/facebookincubator/create-react-app/pull/190