polymer,reactjs,web-component,custom-element , React 0.12.2: “Error: Lower case component names (paper-button) are no longer supported in JSX”


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

Question:

Tag: polymer,reactjs,web-component,custom-element

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 [email protected]^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"
...

Answer:

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.


Related:


How do I use dom-repeat in Polymer binding to a dictionary


polymer
I am trying to bind to data below which is a dictionary <template is="dom-repeat" items="{{data}}"> </template> I have found a similar question here Polymer: How to loop and render HTML to screen <template repeat="{{customer, i in customers}}"> <div>{{i}}, {{customer.name}}</div> </template> but I am not sure if this applies to Polymer...

Why should addChangeListener be in componentDidMount instead of componentWillMount?


javascript,reactjs,reactjs-flux,flux
I saw this line as an answer to another question on here: "componentWillMount should be componentDidMount, or else you'll leak event emitters in node." and I don't really understand it. Can someone explain with more detail? More info: Building a react application with flux, as part of the initial render,...

Better/faster way for changing React array state than cloning it?


reactjs
Whenever a React class has a state object that is or contains an array, updating that state feels awkward. Usually what I do is var newArrayThing = _.clone(this.state.arrayThing); //or slice() newArrayThing[123] = 42; //update stuff this.setState({arrayThing: newArrayThing}); Is there a better or more elegant way of handling this I am...

Computed binding doesn't work with on-click (Polymer)


javascript,html,polymer
<template is="dom-repeat" items="{{myItems}}"> <div on-click="{{ComputedBindingFunction(item)}}">Foo</div> </template> This yields an error saying: listener method {{ComputedBindingFunction(item)}} not defined Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs? Note that ComputedBindingFunction returns a function....

React page layout using react-router


javascript,reactjs,react-router
I have a default layout page here using react router: Header = require('./components/Header'), Footer = require('./components/Footer'), var sampleApp= React.createClass({ getDefaultProps() { return { title: 'Page One' }; }, render: function (){ return ( <div className="app"> <Header title={this.props.title} /> <RouteHandler /> <Footer /> </div> ); }, }); var routes = (...

Unable to render second react component


reactjs
I am just fiddling with react to make a simple website. So here's the code <html> <head> <script src="https://fb.me/react-0.13.3.js"></script> <!-- In-browser JSX transformer, remove when pre-compiling JSX. --> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container"></div> </body> <script type="text/jsx"> var...

Dropshadow from paper-toolbar overlays paper-dialog


css,polymer,polymer-1.0
I have basic drawer app with a dialog box. When the dialog box opens the dropshadow from the toolbar(I assume) is bleeding over the box. Is there a fix for this? <paper-drawer-panel> <paper-header-panel drawer> </... <paper-header-panel main> <paper-toolbar> <paper-dialog>...</paper-dialog> </paper-toolbar> </paper-header-panel> </paper-drawer-panel> Some things I have tried includes moving the...

Canvas element does not resize when using ReactJS and PaperJS together


javascript,html,canvas,reactjs,paperjs
I have found that canvas elements correctly resize on window resize when they are inside react components. They also resize correctly when used with PaperJS. However, they do not resize when used with PaperJS and ReactJS together. Is this an incompatibility between PaperJS and ReactJS or am I instantiating PaperJS...

Hide context menu on outside click


javascript,reactjs
I have a context menu that appears when you right click inside the <div>, and it only goes away if the user click left click inside the <div> again. How do i hide it when a user click anywhere on the page? my fiddle...

What is the proper way to get the value of a React