vue-mapbox-gl icon indicating copy to clipboard operation
vue-mapbox-gl copied to clipboard

Mapbox with Quasar; export 'default' (imported as 't') was not found in 'vue'

Open JWDobken opened this issue 1 year ago • 0 comments

I can't make the vue-mapbox-gl work with the latest quasar (version == 1.3.2).

steps to reproduce

I've create a new project and add choose all default settings:

$ yarn create quasar
$ cd quasar-project/
$ yarn add mapbox-gl
$ yarn add mapbox-gl-vue

In quasar.config.js I add:

const webpack = require('webpack')

module.exports = configure(function (ctx) {
  return {
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
          mapboxgl: 'mapbox-gl',
        }),
      ],
    },
...

and replace the content of IndexPage.vue with:

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
    />
  </div>
</template>
<script>
import Mapbox from 'mapbox-gl-vue'

export default {
  components: { Mapbox },
}
</script>
<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

That should be it! I run the application locally with quasar dev and it complains that some objects are missing:

App •  WARNING  •  UI  in ./node_modules/mapbox-gl-vue/dist/vue-mapbox-gl.esm.js

export 'default' (imported as 't') 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)


 App •  WARNING  • Compilation succeeded but there are warning(s). Please check the log above.

 App • Opening default browser at http://localhost:8080

JWDobken avatar Oct 28 '22 05:10 JWDobken