'Vue 3 createApp is not defined when import from entry file

I'm trying to setup vue app using webpack.

This is my webpack.config.js file:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        "Shared/global": './ClientApp/src/js/Shared/global.js',
    },
    output: {
        filename: 'js/[name].entry.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: ""
    },
    devtool: 'source-map',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'],
            },
            {
                test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
                type: 'asset'
            },
            {
                test: /\.js$/,
                use: {
                  loader: "babel-loader",
                },
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
};

And this is the entry file:

import {createApp} from 'vue';
import { createStore } from 'vuex'
const _ = require('lodash')

In my layout.html I call global.entry.js as such:


<body>
    <div id="layoutApp">
        <h1>HELLO</h1>
    </div>
</body>

<script type="module" src="/dist/js/Shared/global.entry.js" defer></script>
<script src="/ClientApp/src/js/Shared/layout.js" defer></script>

Then I try to use vue in layout.js:

const layoutApp = createApp({
    mounted(){
        console.log("layout is mounted VUE")
    },
});

layoutApp.mount("#layoutApp")

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);

But in chrome console it said createApp is not defined. But if I run only lodash code, lodash works fine. I cant figure out what I did wrong. Any help would be very helpful

javascript vue.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Vue 3 createApp is not defined when import from entry file

Sources

Related Questions