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

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/vue3-openlayers@10.0.1_ol-contextmenu@5.4.0_ol@9.2.4__ol-ext@4.0.18_ol@9.2.4__ol@9.2.4_vue@3.4.27_typescript@5.4.5_/node_modules/ol/Feature' imported from /Users/fabrizio/Documents/Projects/TechCompenso/Repositories/tech-compenso/node_modules/.pnpm/vue3-openlayers@10.0.1_ol-contextmenu@5.4.0_ol@9.2.4__ol-ext@4.0.18_ol@9.2.4__ol@9.2.4_vue@3.4.27_typescript@5.4.5_/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:

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",
  }
}

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

├── ol-contextmenu@5.4.0 -> ./node_modules/.pnpm/ol-contextmenu@5.4.0_ol@9.2.4/node_modules/ol-contextmenu ├── ol-ext@4.0.18 -> ./node_modules/.pnpm/ol-ext@4.0.18_ol@9.2.4/node_modules/ol-ext ├── ol@9.2.4 -> ./node_modules/.pnpm/ol@9.2.4/node_modules/ol ├── vue@3.4.27 -> ./node_modules/.pnpm/vue@3.4.27_typescript@5.4.5/node_modules/vue └── vue3-openlayers@10.0.1 -> ./node_modules/.pnpm/vue3-openlayers@10.0.1_ol-contextmenu@5.4.0_ol@9.2.4__ol-ext@4.0.18_ol@9.2.4__ol@9.2.4_vue@3.4.27typescript@5.4.5/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.

MelihAltintas / vue3-openlayers

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