AstroJS + Vite npm module import error

// 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>

[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`

export default defineConfig({
 ...
  build: {
    rollupOptions: {
      external: ["mapbox-gl"],
    },
  },
});

export default defineConfig({
 ...
  build: {
    rollupOptions: {
      external: ["mapbox-gl"],
    },
  },
});