Importing ol/style into component

[majdal]

Hello!

In a Nuxt project, I'm using vl-layer-vector, and I need to style the features in the component based on some other data that I import from Wikidata.

This example by @ghettovoice shows clearly how to do it, however, because OpenLayers is included from CDN, you can call ol.style.Style().

But if I want to import Style, Fill, or Stroke into my component's <script> section usingimport Style from 'ol/style/Style', I get Cannot use import statement outside a module.

This has been brought up in https://github.com/ghettovoice/vuelayers/issues/382 and https://github.com/ghettovoice/vuelayers/issues/281, but there was no clear solution suggested.

I'm happy to contribute the solution to the docs once it's clarified.

Thanks for the great work :)

[ghettovoice]

Hello @majdal , did you tried setup vuelayers and openlayers inside nuxt as plugin? https://vuelayers.github.io/#/docs/quickstart?id=nuxtjs

UPD also take a note that ol package exports ES6 modules, so probably you also need to try this https://nuxtjs.org/docs/2.x/directory-structure/plugins#es6-plugins

[majdal]

Yes! I've included both the plugin AND the module.

I've tried adding ol to the transpile list, (transpile: ['ol', ]), but that gave me a bunch of core-js errors in the console.

Uncaught TypeError: wellKnownSymbol is not a function
    <anonymous> webpack-internal:///./node_modules/core-js/internals/array-species-create.js:5
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/internals/array-iteration.js:5
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/internals/array-for-each.js:2
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/modules/web.dom-collections.for-each.js:7
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/modules/es.symbol.js:5
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/internals/native-symbol.js:1
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/internals/well-known-symbol.js:9
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/internals/add-to-unscopables.js:1
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/core-js/modules/es.array.iterator.js:3
    NuxtJS 3
    <anonymous> webpack-internal:///./node_modules/eventsource-polyfill/dist/browserify-eventsource.js:1
    NuxtJS 8

[ghettovoice]

I don't actually understand what a reason of this error. I have made a short investigation of it and found this issue https://github.com/zloirock/core-js/issues/743. And I found that switching of useBuiltIns : "usage" to "entry" is really helps.

Here is my test app https://github.com/ghettovoice/vl-ol-nuxt-test-app. I have setup it with create-nuxt-app package. Then:

1. add 2 plugins: ~/plugins/ol.js and ~/plugins/vuelayers.js https://github.com/ghettovoice/vl-ol-nuxt-test-app/tree/main/plugins
2. adjust nuxt js config at plugins, modules and build keys https://github.com/ghettovoice/vl-ol-nuxt-test-app/blob/main/nuxt.config.js
3. change default view compoent https://github.com/ghettovoice/vl-ol-nuxt-test-app/blob/main/components/Tutorial.vue.

And it seems working without errors.

[majdal]

Wow! Interesting find! I'm going to try it out and will report back!

And thank you for putting in all the effort into investigating this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ntraykov]

Adding ol to transpalie list helped me. Thanks a lot @ghettovoice !

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.