Loading dynamic view

Webix JS
#1

I am working on a new project using Elixir and Phoenix which is using esbuild as bundler. I am trying to get the jet-start project working in a new started Phoenix app.

I have copied webix.js and webix.css into my static assets.

I have copied the jet-start source into a separate assets location that is processed by esbuild. I have add npm package to that same assets folder and installed webix-jet. The app.js was slightly changed to remove webpack variables and replaced with values.

I have the index.html setup using source from jet-start but changing the paths to the source files.

When I run the Phoneix app in the browser I observe that webix.js and webix.css are loaded, my app.js and app.css have been bundled and loaded but I have an error that "dynamic require of jet-views/top is not supported.

I tracked this down to something in webpack that refers to jet-views as an alias and found a reference to require jet-views in my app.js bundle.

I do not understand the purpose of jet-views. What is going on with this?

I am also returning to frontend work after like 8 or 9 years so not really used to these bundlers yet.

#2

I just realized I can paste code snippets here. This is the webpack code I am referring to in jet-start

		resolve: {
			extensions: [".js"],
			modules: ["./sources", "node_modules"],
			alias:{
				"jet-views":path.resolve(__dirname, "sources/views"),
				"jet-locales":path.resolve(__dirname, "sources/locales")
			}
		},

and this is the code I found in my app.js bundle:

  var JetApp = class extends JetAppBase {
    constructor(config) {
      config.router = config.router || HashRouter;
      super(config);
      patch(this.webix);
    }
    _loadViewDynamic(url) {
      url = url.replace(/\./g, "/");
      return __require("jet-views/" + url);
    }
  };

And this is the error from the browser:

Error: Dynamic require of "jet-views/top" is not supported
(anonymous function) — app.js:23
(anonymous function)
_loadViewDynamic — JetApp.ts:21
loadView — JetAppBase.ts:182
createFromURL — JetAppBase.ts:217
promiseReactionJob
error — JetAppBase.ts:282
#3

I was digging into the Jet code and found that this alias jet-views is in fact required by Jet. It would be nice if that was documented as a requirement. I wonder what else is required from the starter build.

#4

And found the other alias, jet-locales in the Jet project. So both of those must be part of any build for a Jet project.