Openlayer tiles do not render on build

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.