View Full Version : [OPEN] ExtReact Component inside Plain HTML

8 Oct 2018, 12:43 PM

in ExtReact 6.6.2 it is not possible to use a Button component inside a plain HTML Component:

import React from 'react';
import { Container, Button } from '@sencha/ext-modern';

export default function About() {
return (
<Container padding="20">
<h1>About this App</h1>
<p>Lorem ipsum dolor sit amet.</p>
<Button text="test" />

The error is:

Warning: <Button /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. in Button (created by About)
in div

It was possible before 6.6.2 and it would be a really expensive change for me to rewrite my complete code.

Can someone help?


11 Oct 2018, 11:25 AM
Hi Chris,

Thank you for bringing this to our attention. I have sent this to the support team to review. They will get back to you at their earliest convenience. I appreciate your patience.


17 Oct 2018, 3:25 PM
I'm getting this warning too. What's the fix?

18 Oct 2018, 1:03 PM
@jchris, in my case I discovered my npm file-loader was set up as a regular dependency, but it should have been a devDependency. You should check that. :-)

19 Oct 2018, 5:12 AM
Hi Celestial,

do you mean: "file-loader": "^1.1.6" ? This is in my devDependencies.

Did the move of file-loader to devDependencies solve the problem I described above? And if, did you change anything else, or what you maybe share you package.json? This bug keeps me from using react 16...


28 Oct 2018, 6:06 PM
I have the same issue.
I think this is not related to file-loader. This is because same issue will found if you create the ExtReact new project.

5 Nov 2018, 5:59 AM
Could you at least tell us what your plans are? I can't believe i paid for this software and i don't even get a decent feedback yet.

5 Nov 2018, 8:57 AM
Hello Chris,

Thank you for your patience, this is an issue that the Engineering team is already aware of and working on it, a bug has been reported on this and I have updated the bug reference number here for you to receive updates. This is due to React's change in rendering logic since version 16, ExtReact 6.6 is not able to use ExtJS components inside plain HTML components. The only way to work this for now is to wrap components in Container instead of div. It might require change of code at multiple places, but this is only way right now till this bug is resolved.

Sencha Support.

5 Nov 2018, 10:58 PM
Hi Kumar,

thanks for this update.

I already started to workaround this bug, and gave up after hours of work. It is not only done with using a Container as parent of an component, because then we have the same situation, this Container needs to be inside an other ExtReact component and soon, till you reach the root.

So, if it is not an end section, it is not possible to use other components (HTML / React / MaterialUI, and I don't know the status of the other bug, where it is impossible to use HTML components inside ExtReact components). Anyway, the effort to rewrite my whole application is way to high.

I am sorry to say that, I am using Ext now till a very long time, starting with Ext 2, and it was always a mess to upgrade Ext. That was one reason to use only the components with ExtReact now, to be more independent.

It´s been 4 weeks now, since I reported this bug and you have no fix, this is not a software on which I can rely.

12 Nov 2018, 10:32 PM
@jchris, same situation with you. I need to rewrite all non-Extreact components to ExtReact component but some features cannot reach my goal using ExtReact .....

9 Jan 2019, 5:16 AM
Just checked this with 6.6.3. No change. When will this be fixed?


18 Feb 2019, 5:17 PM
Has someone been able to do it? i have this example code. Im still getting incorrect casing.

While it works, the button is not rendering. It falls back to default button, i guess thats why it works with onClick instead of handler

renderActions = (value, record) => {

<Grid store={this.store} >
<Column text="Name" dataIndex="name" flex={2} type="string" />
<Column text="idRoute" dataIndex="idRoute" flex={2} />
<Column renderer={this.renderActions} />

4 Nov 2019, 11:51 PM
Was there some fix on this from ExtReact 7.0.0? Because on ExtReact 7.0.0 it is still bugging.

15 Nov 2019, 12:18 AM
Any updates on this? We have everything ready to update to 7.0, as we had with 6.7, but we cannot do it if this is not solved. It is unacceptable for this bug to be corrected. I know it has todo with the way React fiber renders components, but please tell us if this is going to be solved or not.

Also, to further enlighten, if you had column renderers which returned ExtReact JSX, that does not work anyway. ItemTpl does not let you return JSX and add listeners, and the WidgetCell is just plain absurd: instead of forcing you to write JSX or HTML, you would have to code your cell bodies using ExtJS, and most of our jr. developers don't even know what a xtype is.

We have been waiting to renew our license but we are already seeing the light at the end of the tunnel: Sencha is leaving ExtReact for dead (it was just ExtJS with a quirky "reactify" anyway), and now we will have to rewrite our whole app using our own (or other 3rd party) UI toolkit.

You guys were amazing until you released Ext 6 and Embarcadero bought you. From that moment on you have been on a free fall, a neverending free fall.

19 Nov 2019, 5:49 AM