Results 1 to 7 of 7

Thread: Integrating ExtReact in existing React app

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526
    Answers
    2

    Default Integrating ExtReact in existing React app

    Can anyone point out how to turn off ES6 modules in the .babelrc below (just for dev-web)?

    There's something broken with my build and the main culprit seems to be babel settings?

    Including a ExtReact Panel in the layout bugs out, with the error:
    Warning: <Panel /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    Once the application, I can create an Ext Window and show it, so this points me to the ExtReact class system not being available at time the page is loaded?

    The docs here suggest turning off ES6 module transpilation, but I can't get this setting right. https://docs.sencha.com/extreact/6.6...ext_react.html

    Code:
    # .babelrc
    {
      "presets": ["babel-preset-expo"],
      "env": {
        "development-web": {
          "plugins": [
            "@sencha/ext-react-babel-plugin",
            "transform-react-jsx-source"
          ]
        },
        "development-native": {
          "plugins": [
            "transform-react-jsx-source"
          ]
        }
      }
    }

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,005
    Answers
    5

    Default

    Hello there- thank you for your question and sorry for the trouble. I have shared this with the support team and asked that they reach out to you to provide some assistance as soon as possible. Your patience is greatly appreciated!

    Michele

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526
    Answers
    2

    Default

    Hey Michele,

    Here's a commit with ExtReact integrated: https://github.com/josh-freislich/re...mits/ext-react

    When I run the app, I get an Warning: <Panel /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in Panel (at Recipes.js:53)
    error.

    Ext is injected on index.html, but not available when the class compiles.

    Any pointers would be greatly appreciated.

    Cheers,
    Josh

    Screen Shot 2018-12-17 at 10.27.05 pm.jpg
    Last edited by saJoshua; 19 Dec 2018 at 10:20 PM. Reason: Updating the github link to a feature branch.

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526
    Answers
    2

    Default

    ping

  5. #5
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,005
    Answers
    5

    Default

    Hi Josh,

    I shared this with them last Thursday. Sorry for the delay in their response. I will check back with them!

    Thanks,

    Michele

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526
    Answers
    2

    Default

    Michele,

    Yea, if support could have a look at that repo and suggest any edits. Would be great to use Sencha these days. I used it quite successfully in the past, but no dramas either way.

    Also, would be great if using Sencha in my project didn't take over the layout. Ideally I can mix Ext components into my application and it can play nice with other layout systems.

    Cheers,
    Josh

    Sencha.png

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526
    Answers
    2

    Default

    Updating the github link to a feature branch.

    https://github.com/josh-freislich/re...mits/ext-react

Similar Threads

  1. Replies: 0
    Last Post: 12 Oct 2018, 3:03 PM
  2. Replies: 0
    Last Post: 11 Apr 2018, 6:51 AM
  3. Timing for next update of React / Webpack / ExtReact
    By Necro-Engineering in forum Q&A
    Replies: 1
    Last Post: 4 Apr 2018, 2:23 PM
  4. ExtReact with React Router
    By j.ashworth in forum Q&A
    Replies: 1
    Last Post: 5 Sep 2017, 6:38 AM
  5. Replies: 6
    Last Post: 3 Aug 2017, 4:00 PM

Tags for this Thread

Posting Permissions

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