Webpack/Vue vue__WEBPACK_IMPORTED_MODULE... is not defined

Question

I would like to make a web app which works with VueJS, the scripts files will be packed all in one with Webpack.

I've installed Vue and Webpack with Npm. Here is the structure of my app folder :

dist
- main.js
- output.css
node_modules
- "contain the dependencies installed with NPM, including Vue"
package-lock.json
package.json
src
- app.js
- App.vue
- index.html
- input.css
tailwind.config.js
template.html
webpack.config.js

Here's my dependencies' in the "package.json" file :

"devDependencies": {
    "tailwindcss": "^3.0.23",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@heroicons/vue": "^1.0.5",
    "vue": "^3.2.31"
  }

Here's the content of my "webpack.config.js"

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Here's the content of my "app.js"

import Vue from 'vue'

console.log(Vue); // => return "undefined"

MY PROBLEM :

Vue is not loaded, and I don't know why.

I've the following error in the log of the main.js building :

npx webpack --config webpack.config.js --mode=development --watch
asset main.js 521 KiB [compared for emit] (name: main)
runtime modules 891 bytes 4 modules
cacheable modules 429 KiB
  modules by path ./node_modules/@vue/ 428 KiB
    ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 59.9 KiB [built] [code generated]
    ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 304 KiB [built] [code generated]
    ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js 40.3 KiB [built] [code generated]
    ./node_modules/@vue/shared/dist/shared.esm-bundler.js 23.5 KiB [built] [code generated]
  ./src/app.js 184 bytes [built] [code generated]
  ./node_modules/vue/dist/vue.runtime.esm-bundler.js 611 bytes [built] [code generated]

WARNING in ./src/app.js 10:12-15
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

Does somebody have a solution or a way to follow?

Answer 1

As the error says, there is no 'default' export in 'vue' package. That is because the global Vue API initialization in Vue 3 has been changed from:

import Vue from 'vue'

to

import { createApp } from 'vue'
const app = createApp({})

In other words, the global API is not exported by default by the 'vue' package, but is created by the 'createApp' function.