Cannot find module .../node_modules/ol/Feature Did you mean to import "ol/Feature.js"?

[fabrilallo]

Describe the bug
Hello everyone!
I'm trying to integrate vue3-openlayers in my personal project.
My stack is:

• Astro
• Vue

I'm trying to run this code:

<script setup lang="ts">
import { Map, Layers, Sources } from "vue3-openlayers";
</script>

<template>
    <Map.OlMap style="min-width: 400px; min-height: 400px;">
        <Map.OlView :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
        <Layers.OlTileLayer>
            <Sources.OlSourceOsm />
        </Layers.OlTileLayer>
    </Map.OlMap>
</template>

But i got this error:
Cannot find module '/Users/fabrizio/Documents/Projects/TechCompenso/Repositories/tech-compenso/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/ol/Feature' imported from /Users/fabrizio/Documents/Projects/TechCompenso/Repositories/tech-compenso/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vue3-openlayers/dist/vue3-openlayers.es.js Did you mean to import "ol/Feature.js"?

If i edit manually the import in the build and append .js it works. I think it's something related to the tsconfig.jsonorastrobuild.
Consider that astro use vite for the building phase. So i can also do some tweaks on vite in the astro configuration if it is necessary.
These are respectively my tsconfig.jsonand astro.config.mjs:

1. tsconfig.json

{
  "extends": "astro/tsconfigs/base",
  "include": [
    "netlify/*",
    "node_modules/@prisma/client"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "isolatedModules": true,
    "esModuleInterop": true,
    "target": "ESNext",
    "paths": {
      "@lib/*": [
        "src/lib/*"
      ],
      "@utils/*": [
        "src/utils/*"
      ],
      "@components/*": [
        "src/components/*"
      ],
      "@layouts/*": [
        "src/layouts/*"
      ],
      "@assets/*": [
        "src/assets/*"
      ],
      "@pages/*": [
        "src/pages/*"
      ],
      "@functions/*": [
        "netlify/functions/*"
      ]
    },
    "jsx": "preserve",
  }
}

2. astro.config.mjs

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import mdx from "@astrojs/mdx";
import netlify from "@astrojs/netlify";

// https://astro.build/config
import vue from "@astrojs/vue";


// https://astro.build/config
export default defineConfig({
  site: "https://techcompenso.com",
  output: "server",
  integrations: [
    tailwind(),
    mdx({
      optimize: true,
    }), 
    vue({ appEntrypoint: "/src/app.js" }),
  ],
  adapter: netlify(),
});

Affected version(s)

├── [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/ol-contextmenu
├── [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/ol-ext
├── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/ol
├── [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/vue
└── [email protected] -> ./node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vue3-openlayers

Expected behavior
It should not throw any error for the import.

I would really appreciate your help. Thank you very much.

[signmeuptwice]

I have the same issue

ERROR in ./node_modules/vue3-openlayers/dist/vue3-openlayers.es.js 105:0-56
Module not found: Error: Can't resolve 'ol/events/condition' in '/Users/user/Documents/Projects/app/node_modules/vue3-openlayers/dist'
Did you mean 'condition.js'?
BREAKING CHANGE: The request 'ol/events/condition' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/vue/app.js 3:0-44 52:23-36