I have a relatively simple requirement to start out with.

I want to be able to load a particular UI component, based on some dynamic context. I was thinking that dynamic imports could be used for this purpose. The dynamic imports should be loaded through the Web browser (no nodeJS).

Details about what is possible with dynamic imports are very sketchy to me - at best, probably also because I'm not an expert in the field of JavaScript/TypeScript (yet).

I'm using vanilla JS at the moment and vitejs as build tool.

Here is what I have so far.

This is my main.ts file:

const getPath = () => {
  if (import.meta.env.MODE === 'development') {
    return 'http://127.0.0.1:3000/one.js';
  } else {
    return 'http://127.0.0.1:5000/one.js';
  }
};

import(getPath()).then((Module) => {
  Module.default();
});

This already makes vitejs barf, complaining that it cannot analyze things - but I'm ignoring that for now. The one.js file looks like this:

const hello = () => {
    console.log('Hello from one');
};

export default hello;

Both run dev as run serve work with this setup, as-in, the message is printed on the browser console.

My next thing I want to see working is how one.js would be able to itself import a module and work with that. I've tried this with moment like so:

import moment from "moment";

const hello = () => {
    console.log('Hello from one ', moment().format());
};

export default hello;

This errors with:

Uncaught (in promise) TypeError: Error resolving module specifier “moment”. Relative module specifiers must start with “./”, “../” or “/”.

Now I don't know whether what I want to do, is not support or that I'm just not doing it the right way. Any pointers would be appreciated.