Webpack/Vue vue__WEBPACK_IMPORTED_MODULE... is not defined

Soundboy39
Javascript VueJS

Salut les experts Front-end qui utilisent les technos du futur (en l'occurence du présent...) !,

Je souhaiterais développer une application web fonctionnant avec VueJS, et dont les scripts sont "compilés" avec Webpack.

J'ai installé Vue et Webpack avec Npm.
Voici la structure de mon dossier :

dist
- main.js
- output.css
node_modules
- "contient bien les dépendances installées via NPM, dont vue"
package-lock.json
package.json
src
- app.js
- App.vue
- index.html
- input.css
tailwind.config.js
template.html
webpack.config.js

Dépendances dans le "package.json"

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

Contenu du "webpack.config.js"

const path = require('path');

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

Je n'ai pas d'erreur ou d'alerte lors de la compilation du fichier "main.js".
Le fichier "main.js" est bien généré dans le dossier "dist", avec les élements contenu dans le "app.js", j'appel bien le fichier dans mon "template.html".

Mon problème

Mon template n'est pas interprété par Vue, puisque Vue n'est apparement pas chargé.

Voici les différents essais que j'ai effectué, avec le message visible dans la console pour chaque erreur :

/** Ne fonctionne pas : Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined *//
import Vue from 'vue'

Vue.createApp({
  data: {}
}).mount('#app')
/** Ne fonctionne pas : Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined *//
import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue !'
  }
})
/** Uncaught TypeError: _App_vue__WEBPACK_IMPORTED_MODULE_1__.default.mount is not a function *//
import Vue from 'vue'
import App from './App.vue'

App.mount();

/** Code de './App.vue' **/
export default {
  el: '#app'
}

Ce que je veux

Je veux pouvoir importer et utiliser Vue dans mon script.

Ce que j'obtiens

Bah ça marche pâ... :( voir les morceaux de code ci-dessus.

Vous noterez que j'utilise Tailwind pour le CSS, mais je ne pense pas que cela ait une incidence.

En vous rmerciant par avance pour vos lumières,

Mickaël

3 réponses

Soundboy39
Auteur
Réponse acceptée

C'est bon j'ai trouvé, je ne faisais pas l'import comme il faut (apparement parce que je n'étais pas sur la bonne doc ^^).

En fait, il faut faire :

import { createApp } from 'vue'

pour que Vue soit bien importé.

J'ajoute que j'ai du palier un autre problème, le template était bien traité mais le html de mon bloc "#app" était vide.
Problème réglé en faisant ceci :

import { createApp } from 'vue/dist/vue.esm-bundler';
PierreGuede

Concernant ton erreur: Uncaught TypeError: _App_vue__WEBPACK_IMPORTED_MODULE_1__.default.mount is not a function mount est utilisé quand tu crée ton application vue( Vue.createApp) donc revois ça
quand aux autres j'ai jamais rencontré cette erreur, regarde sur stackoverflow.com voir si tu vas trouver une solution ou ecrit dans le serveur discord de grafikart :)

Soundboy39
Auteur

OK Merci pour la réponse,

En fait, le problème est en amont : Vue n'est pas importé par WebPack.

Si je fait un console.log(Vue); j'ai "undefined" en retour.
Et dans le log de la compil webpack, cette fois j'ai bien un avertissement, voici le log complet avec la commande :

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)

Je vais continuer de chercher de mon côté, mais si vous avez des idées je suis preneur parce que je suis un point coincé.

Orivoir21

Bonjour si tu veux importé Vue en tant que valeur par défaut tu peux utiliser cette syntaxe:

import * as Vue from 'vue'

Qui peut se traduire par: importe tous en tant que Vue

En faite Webpack va importé tous les composants exporté par vue voir le warning:

(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)

et les ranger dans un objet appeler Vue.

Ce qui te permettra d'utiliser les expressions comme:

Vue.createApp

Et tous les autres composants qui sont exporté par Vue.