AstroJS + Vite npm module import error

Hey, I have an npm module I'm trying to use in an Astro component.
// SeedMap.astro
---
import 'mapbox-gl/dist/mapbox-gl.css';
---

<script>
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = "";

const map = new mapboxgl.Map({
container: "map", // container ID
style: "", // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
</script>
// SeedMap.astro
---
import 'mapbox-gl/dist/mapbox-gl.css';
---

<script>
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = "";

const map = new mapboxgl.Map({
container: "map", // container ID
style: "", // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
</script>
When I try to build my app, it gives me the following error:
[vite]: Rollup failed to resolve import "mapbox-gl/dist/mapbox-gl.css" from "C:/Users/Vince/Desktop/Christ-Church-Sedalia/src/components/SeedMap.astro".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
[vite]: Rollup failed to resolve import "mapbox-gl/dist/mapbox-gl.css" from "C:/Users/Vince/Desktop/Christ-Church-Sedalia/src/components/SeedMap.astro".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
I also tried to add this, as suggested by the error message but that didn't fix it:
export default defineConfig({
...
build: {
rollupOptions: {
external: ["mapbox-gl"],
},
},
});
export default defineConfig({
...
build: {
rollupOptions: {
external: ["mapbox-gl"],
},
},
});
This is probably really obvious but I've tried looking it up and can't find anything, would love some help if possible
1 Reply
vince
vince16mo ago
Worst case scenario I put it inside it's own .js file but I'd really like to avoid that if possible. This would be a great thing to put inside a component so I can use it in multiple different places
Want results from more Discord servers?
Add your server