CODEWITHSUNDEEP
polymerreactjsweb-componentcustom-element
senornestor
senornestor

Reputation: 4165

React 0.12.2: "Error: Lower case component names (paper-button) are no longer supported in JSX"

I am trying to use a web component (paper-icon-button) in a React component and I am getting the following error:

Error: Lower case component names (paper-button) are no longer supported in JSX" error: See http://fb.me/react-jsx-lower-case

As of React 0.12, all lower-case tag names are interpreted as DOM elements vs. React components, so this should work:

<paper-icon-button className="red" icon="favorite"></paper-icon-button>

However, I am noticing that the following condition is still included the current versions of /node_modules/react/dist/JSXTransformer.js and /node_modules/react-tools/vendor/fbtransform/transforms/react.js:

// Identifiers with lower case or hypthens are fallback tags (strings).
  // XJSMemberExpressions are not.
  if (nameObject.type === Syntax.XJSIdentifier && isTagName(nameObject.name)) {
    // This is a temporary error message to assist upgrades
    if (!FALLBACK_TAGS.hasOwnProperty(nameObject.name)) {
      throw new Error(
        'Lower case component names (' + nameObject.name + ') are no longer ' +
        'supported in JSX: See http://fb.me/react-jsx-lower-case'
      );
    }

This comment // This is a temporary error message to assist upgrades seems to convey that this is just an informative message, but it's breaking my app's Grunt workflow. How can I use custom elements/web components with react@^0.12?

My project:

I am receiving the error when running my grunt-browerify tasks with the options: { transform: [require('grunt-react').browserify] } option. This is what I have in my package.json:

...
"grunt-browserify": "^3.3.0",
"grunt-react": "^0.10.0",
"react": "^0.12.2",
"node-jsx": "^0.12.4"
...

Upvotes: 0

Views: 558

Answers (1)

andrewrota
andrewrota

Reputation: 41

This should be fixed in React.js 0.13.0-alpha.1 or higher since this was merged. Upgrading to 0.13 should remove the warning.

Upvotes: 1

Related Questions