ESM Builder Compatibility
lermontex opened this issue · 0 comments
lermontex commented
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");