ktsn/vue-router-layout

ESM Builder Compatibility

lermontex opened this issue · 0 comments

I am using Vue CLI and would like to generate the app as an EMS module, however after connecting and configuring
vue-router-layout i am getting error:

ReferenceError: importScripts is not defined
    i main.mjs:1
    e main.mjs:1
    e main.mjs:1
    e main.mjs:1
    index index.js:2
    extractComponentsGuards vue-router.esm-bundler.js:2010
    navigate vue-router.esm-bundler.js:3089
    promise callback*navigate vue-router.esm-bundler.js:3084
    pushWithRedirect vue-router.esm-bundler.js:2979
    push vue-router.esm-bundler.js:2915
    install vue-router.esm-bundler.js:3329
    use runtime-core.esm-bundler.js:3808
    <anonymous> main.js:22
    433 main.mjs:1
    __webpack_require__ main.mjs:1
    <anonymous> main.mjs:1
[vue-router.esm-bundler.js:3248](webpack://website/node_modules/vue-router/dist/vue-router.esm-bundler.js?ec2d)
[Vue Router warn]: Unexpected error when starting the router: ReferenceError: importScripts is not defined
    i main.mjs:1
    e main.mjs:1
    e main.mjs:1
    e main.mjs:1
    index index.js:2
    extractComponentsGuards vue-router.esm-bundler.js:2010
    navigate vue-router.esm-bundler.js:3089
    promise callback*navigate vue-router.esm-bundler.js:3084
    pushWithRedirect vue-router.esm-bundler.js:2979
    push vue-router.esm-bundler.js:2915
    install vue-router.esm-bundler.js:3329
    use runtime-core.esm-bundler.js:3808
    <anonymous> main.js:22
    433 main.mjs:1
    __webpack_require__ main.mjs:1
    <anonymous> main.mjs:1

vue.config.cjs

module.exports = {
  configureWebpack: {
    target: "webworker",
    output: {
      filename: "[name].mjs",
      chunkFilename: "[name].mjs",
      chunkFormat: "array-push",
      library: {
        type: "module",
      },
    },
    mode: "production",
    entry: "./src/main.js",
    optimization: {
      splitChunks: false,
    },
    experiments: {
      outputModule: true,
    },
  },
  filenameHashing: false,
  pluginOptions: {
    autoRouting: {
      chunkNamePrefix: "page-",
    },
  },
};

babel.config.cjs

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import routes from "vue-auto-routing";
import { createRouterLayout } from "vue-router-layout";

const RouterLayout = createRouterLayout((layout) => {
  return import("@/layouts/" + layout + ".vue");
});

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: RouterLayout,
      children: routes,
    },
  ],
});

export default router;

src/main.js

import { createApp, h } from "vue";
import App from "@/App.vue";
import router from "@/router";

const app = createApp({
  render() {
    return h(App);
  },
});

app.use(router);

app.mount("#app");