vue-mapbox-gl
vue-mapbox-gl copied to clipboard
Mapbox with Quasar; export 'default' (imported as 't') was not found in 'vue'
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