Results 1 to 4 of 4

Thread: Using Ext JS 6.5.2 with webpack

  1. #1
    Sencha User patrickrs's Avatar
    Join Date
    Sep 2014
    Posts
    90
    Answers
    4

    Default Using Ext JS 6.5.2 with webpack

    Has anyone successfully bundled an Ext JS app using webpack? I've tried many, many techniques, but none have succeeded.

    As a proof of concept, I'm just trying to get a simple Ext JS app to render after bundling both my app code and the Ext JS library into a single file. I got this technique to work with jQuery, but not with Ext JS.

    I'm pretty sure it's a problem with scope. I can clearly see that webpack is bundling the Ext JS ext-all.js file, but when I try to run my app, either via code or the console, I get a type error that Ext.getVersion(), for example, is not a function.

    If I type "Ext" in the console, it is recognized, but as an empty object. Not sure what I'm doing wrong. I've trying expose-loader, imports-loader, plugins, and many other techniques. I know that Sencha is starting to support both NPM and webpack for their ExtReact code, but even examining that info didn't help.

    I realize that without code, troubleshooting is impossible. Just wondering if anyone else has experienced this and found a solution.

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    You may want to check out how it is done with Reactor: https://github.com/sencha/extjs-reac...webpack-plugin Sencha Cmd is still needed.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  3. #3
    Sencha User patrickrs's Avatar
    Join Date
    Sep 2014
    Posts
    90
    Answers
    4

    Default

    Quote Originally Posted by tristan.lee View Post
    You may want to check out how it is done with Reactor: https://github.com/sencha/extjs-reac...webpack-plugin Sencha Cmd is still needed.
    As I mentioned, I did look at that code. It's WAY over my head, which is why I'm trying to start small. I'm not (yet) trying to bundle various source files into a custom Ext JS build. I'm just trying to stand up a simple app using ext-all.

    At this point, all I want to do is figure out why, when webpack bundles ext-all.js with my other simple code, the resulting bundle does not allow an Ext JS function to be called on the page.

    The odd thing (to me) is that the HTML page is obviously being operated on by the Ext JS code when it's rendered, because I see injected classes on the body tag. But in comparing the ext-all.js file to a library like jQuery, the jQuery is encapsulated in a module, while the Ext JS code is essentially a bunch of variables and methods concatenated together. I'm guessing that's where the difference lies, but beyond that, I can't figure it out.

  4. #4
    Sencha User patrickrs's Avatar
    Join Date
    Sep 2014
    Posts
    90
    Answers
    4

    Default

    I discovered a solution, of sorts, but it's a poor one because it requires that I edit the generated framework source files.

    I simply added 'module.exports = Ext;' to the end of 'ext-all.js', and the framework worked as expected.

    I guess that makes sense, considering how other NPM packages function, but it's not ideal.

Similar Threads

  1. Replies: 5
    Last Post: 21 Sep 2017, 6:42 PM
  2. Replies: 2
    Last Post: 20 Jul 2017, 6:27 AM
  3. ExtJs and WebPack or other loaders?
    By daplume in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 14 Jun 2017, 7:39 AM
  4. Reactor Webpack & TypeScript
    By jsheely in forum Q&A
    Replies: 9
    Last Post: 31 May 2017, 11:45 AM

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
  •