0

I am building a vanilla TS SPA that is using Vite as the build tool. For my main app, I have a index.html with a script tag pointing to the entry point .ts file, and that all works great.

However, I also have another .mjs file. This file uses a import statment to use an external package. This file is loaded dynamically using my presentation layer into various windows. I understand that is quite vague, but it's realted to something called OpenFin and it doesn't necessarily matter. What does however, is that there is no .html file that this JS file is loaded into. It is done so programatically by the platform.

During runtime, I am running into cannot use import statement outside a module. This was expected of course, because the external package isn't even loaded in the window where that script is being executed.

What I am looking to do as part of my Vite workflow, is pick out this .mjs file, and bundle it up into a single .js file, which includes the external package. Then I will inject the bundled file directly (again, this is nasty, but it's all part of a proof of concept).

How can I go about doing this?

I have specified the .mjs as one of my entrypoints, but the bundle that was generated still made use of an import, so my situation didn't improve.

vite.config.mts below

const entryPoints = {
    workspace:  fileURLToPath(new URL('./provider.html', import.meta.url)),
    excelInjection: fileURLToPath(new URL('./excel-injection.mjs', import.meta.url)),
}

export default defineconfig({
  build: {
    rollupOptions: {
      input: entryPoints,
    },
  },
  server: {
    port: 8080,
    host: "127.0.0.1",
  },
});

0

Browse other questions tagged or ask your own question.