When i run next build i get following error:
./node_modules/leaflet/dist/images/layers-2x.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
> Build error occurred
Error: > Build failed because of webpack errors
at /app/node_modules/next/dist/build/index.js:397:19
at async Span.traceAsyncFn (/app/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (/app/node_modules/next/dist/build/index.js:77:25)
#
my next.config.js seems to be configured to process .png files. Project uses leaflet and react-leaflet libraries. Error says nothing about images that I put in /public/images
const { i18n } = require('./next-i18next.config');
const theme = require('./app/styles/antdoverrides');
module.exports = {
webpackDevMiddleware: (config) => {
config.watchOptions = {
poll: 800,
aggregateTimeout: 300,
};
return config;
},
module: {
loaders: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
}
};
One common issue with using react leaflet with nexjs is that it will not work with ssr. Are you loading your leaflet component in with dynamic?
import dynamic from "next/dynamic";
import React from "react";
import { LeafletMapProps } from "src/components/Map/Leaflet/LeafletMap";
import { LeafletMarkerProps } from "src/components/Map/Leaflet/LeafletMarker";
// Load every leaflet component since they dont work with ssr
interface MapProps extends LeafletMapProps {}
const Map: React.FC<MapProps> = (props) => {
const Map = React.useMemo(
() =>
dynamic(() => import("src/components/Map/Leaflet/LeafletMap"), {
loading: () => <p>A map is loading</p>,
ssr: false,
}),
[]
);
return <Map {...props} />;
};
interface MarkerProps extends LeafletMarkerProps {}
const Marker: React.FC<MarkerProps> = (props) => {
const Marker = React.useMemo(
() =>
dynamic(() => import("src/components/Map/Leaflet/LeafletMarker"), {
ssr: false,
}),
[]
);
return <Marker {...props} />;
};
export { Map, Marker };