Results 1 to 10 of 10

Thread: ExtReact Component inside Plain HTML

    You found a bug! We've classified it as EXTJS-27496 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2008
    Posts
    14
    Vote Rating
    4
      1  

    Default ExtReact Component inside Plain HTML

    Hi,

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

    HTML Code:
    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>
            <div>
                <Button text="test" />
            </div>
        </Container>
      )
    }

    The error is:

    PHP Code:
    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?

    Thanks
    Chris

  2. #2
    Ext Team Member
    Join Date
    Sep 2017
    Posts
    681
    Vote Rating
    -322
      -1  

    Default

    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.

    Thanks,
    Michele

  3. #3
    Sencha User
    Join Date
    Oct 2018
    Posts
    9
    Vote Rating
    1
      0  

    Default

    I'm getting this warning too. What's the fix?

  4. #4
    Sencha User
    Join Date
    Oct 2018
    Posts
    9
    Vote Rating
    1
      0  

    Default

    @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. :-)

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2008
    Posts
    14
    Vote Rating
    4
      0  

    Default

    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...

    Thanks
    Chris

  6. #6
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    42
    Vote Rating
    1
      0  

    Default

    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.

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2008
    Posts
    14
    Vote Rating
    4
      0  

    Default

    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.

  8. #8
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    120
    Vote Rating
    -149
      0  

    Default

    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.

    Regards,
    Kumar
    Sencha Support.

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2008
    Posts
    14
    Vote Rating
    4
      2  

    Default

    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.

  10. #10
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    42
    Vote Rating
    1
      0  

    Default

    @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 .....


Similar Threads

  1. Replies: 1
    Last Post: 15 Sep 2015, 6:51 AM
  2. Insert component inside HTML
    By amsoft2001 in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 18 Dec 2013, 11:11 AM
  3. Google Map inside List Template / Component inside HTML
    By nikopotam in forum Sencha Touch 2.x: Discussion
    Replies: 3
    Last Post: 3 Sep 2013, 11:29 PM
  4. Replies: 0
    Last Post: 24 May 2011, 7:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •