Uncaught TypeError: Cannot read property 'use' of undefined. When using Vuex

Hi,

This is my main.js

`import Vue from 'vue'; import VueCustomElement from "vue-custom-element"; import ZalaColorFunnel from "./zala-color-funnel"; import store from "@store";

Vue.use(VueCustomElement); ZalaColorFunnel.store = store; Vue.customElement("zala-color-funnel", ZalaColorFunnel);`

this is my store js

`import Vuex from "vuex"; import Vue from "vue"; import state from "./state"; import mutations from "./mutations"; import actions from "./actions"; import getters from "./getters"; import modules from "./modules";

Vue.use(Vuex);

export default new Vuex.Store({ strict: process.env.NODE_ENV !== "production", state, mutations, actions, getters, modules });`

I am using vue cli to create this app. This my vue.config.js

`const webpack = require("webpack"); const path = require("path");

module.exports = { css: { sourceMap: true, loaderOptions: { scss: { prependData: @import "~@scss/_variables.scss"; @import "~@scss/_mixins.scss"; } } }, devServer: { overlay: { errors: true, warnings: true } }, pluginOptions: { lintStyleOnBuild: true, stylelint: { fix: false, files: [ 'src/*/.{vue,css,scss,sass}' ] } }, chainWebpack: config => { // eslint config config.module .rule("eslint") .test(/.(js|vue)$/) .use("eslint-loader") .loader("eslint-loader") .end();

    //aliases config
    config.resolve.alias
        .set("@assets", path.resolve(__dirname, "./src/assets"))
        .set("@scss", path.resolve(__dirname, "./src/assets/scss"))
        .set("@fonts", path.resolve(__dirname, "./src/assets/fonts"))
        .set("@icons", path.resolve(__dirname, "./src/assets/icons"))
        .set("@img", path.resolve(__dirname, "./src/assets/images"))
        .set("@js", path.resolve(__dirname, "./src/assets/js"))
        .set("@helpers", path.resolve(__dirname, "./src/assets/js/helpers"))
        .set("@store", path.resolve(__dirname, "./src/store"))
        .set("@components", path.resolve(__dirname, "./src/components"))
        .set("@globalComponents", path.resolve(__dirname, "./src/components/global"))
        .set("vue$", "vue/dist/vue.common.js");
},
configureWebpack: {
    plugins: [
        new webpack.DefinePlugin({ isDev: process.env.NODE_ENV !== "production" }),
        new webpack.ProvidePlugin({  dl: path.resolve(__dirname, "./src/assets/js/devLogger") })
    ]
}

}; `

when i run vue-cli-service build --target lib --name your-component-name src/main.js its build corectly, But when i try set component on html page i get error here screenshot this error from store js on line Vue.use(Vuex)

Can you help me?

karol-f / vue-custom-element

Uncaught TypeError: Cannot read property 'use' of undefined. When using Vuex #230