Converting ES6 modules for use in CEP HTML panel

[m1b]

I have a working app UI that I can view and test in chrome and I figured that it should work in a CEP 10 extension given that it doesn't use anything that isn't available in chrome 74. Except my UI uses components as native javascript modules. This shouldn't be a problem because chromium 74 supports native javascript modules, except that (I didn't realise!) html specs forbid loading modules from a file url which, it seems, is how CEP extensions load. So it has nothing to do with CEP and is just my lack of knowledge about this feature of html spec. (By the way, when I test with files served from a local web server, it works perfectly.)

So my question is: what's the best way to convert vanilla javscript modules (about 20 components) for use in a CEP extension but keep them modular? I'm wondering if webpack or maybe even typescript/babel might be a possibility? I don't have experience with any of these, and I'm happy to learn the one I need, but I'd love some advice.

(Note: everything I am talking about occurs on the JS side of the CEP panel. I don't care about the JSX side at this stage.)

[Silly-V]

Hey you know more than I do about all this, all I can say is that you can use TypeScript which a target of "es6" and module as to be "commonjs". Here is a tsconfig that I have found to be working for me. I can write all sorts of modern Typescript gibberish, and it turns it all into proper old-skool JS gibberish!
I will add, my components aren't actually in TS, at this time - they are just regular JS but they execute a bunch of code that I made in TS because I'm mainly focused on making various logic work in a separate place than the front-end component. I know there's probably some way to make it also work properly to also create the components too. I actually do not see why not, since TS will transpile to valid JS and that valid JS can surely contain a component properly recognized by CEP!

{

  "compilerOptions": {

    "module": "commonjs",

    "target": "es6",

  },

  "exclude": [

    "node_modules",

  ]

}

[m1b]

Yes I think typescript and commonjs seems like an excellent thing to try! Thanks heaps Silly-V that is really helpful.

- Mark

[Silly-V]

Let me know if this ends up working for you!

[m1b]

Frustratingly I've been unable to get back to this project but as soon as I can, I'll let you know how it went. Thanks again!

[TreyP123]

Did you ever end up figuring this issue out?  Running into a similiar issue for Spectrum Web Components node modules

[m1b]

Hi @TreyP123, not yet. Unfortunately, running into this issue derailed my project for long enough that I've been distracted by other "more important" (or often easier) things. I still plan to solve it, but not enough time at the moment.

- Mark