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

vinceOP•2y 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

Gaming

Programming

AstroJS + Vite npm module import error