Openlayer tiles do not render on build - css

Question

I am using ol version 7.1 with react 18.04 and next 13
This is the code
import { Feature } from "ol";
import { Point } from "ol/geom";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import Map from "ol/Map";
import "ol/ol.css";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
import Icon from "ol/style/Icon";
import Style from "ol/style/Style";
import View from "ol/View";
import type { FunctionComponent, PropsWithChildren } from "react";
import { useEffect, useRef } from "react";
export const Map: FunctionComponent<
PropsWithChildren<{ coordinates: number[] }>
> = ({ children, coordinates }) => {
const transformedCoordinates = fromLonLat(coordinates);
const mapElement = useRef<HTMLDivElement>(null);
const mapRef = useRef<Map>();
useEffect(() => {
const point = new Point(transformedCoordinates);
const feature = new Feature({ geometry: point });
const drawSource = new VectorSource({ wrapX: false, features: [feature] });
const svg = 'some svg'
const style = new Style({
image: new Icon({
opacity: 1,
src,
scale: 0.08,
}),
});
if (mapElement.current && !mapRef.current) {
mapRef.current = new Map({
target: mapElement.current ?? undefined,
layers: [
new TileLayer({
source: new OSM(),
}),
new VectorLayer({
source: drawSource,
style,
}),
],
view: new View({
center: transformedCoordinates,
zoom: 14,
}),
});
}
}, [transformedCoordinates]);
return (
<div
id="map"
className="map"
style={{ height: "100%", width: "100%" }}
ref={mapElement}
>
{children}
</div>
);
};
Used this way:
<div className="relative h-[250px] w-[350px]">
<Map coordinates={data} />
</div>
Using next dev is rendering the map totally fine:
But using next build, does not display the map, but just the outer style. What am I missing?
I tried adding some Scripts which I saw from ol, but the threads were pretty old and it did not change anything.
I do not know where ol gets the map styling etc. from. It seems like somehow this gets missing in build mode?
I am also using JOY ui & tailwind css, not sure if there are classnames which could override something in ol?

Answer 1

Try setting swcMinify to false in next.config. Since Next v13 swcMinify is true by default.