🐛 [BUG] Error when used with Next.js

[Chen-Zhihui]

🐛 [BUG] Error when used with Next.js

[asgomda]

Currently facing a similar problem with NextJS even when I update the config file to use less-loader.

/** @type {import('next').NextConfig} */
import { createRequire } from "module";
const require = createRequire(import.meta.url);

const nextConfig = {
	webpack(config, { isServer }) {
		config.module.rules.push(
			{
				test: /\.css$/,
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.less$/,
				use: [
					"style-loader",
					"css-loader",
					{
						loader: "less-loader",
						options: {
							lessOptions: {
								javascriptEnabled: true,
							},
						},
					},
				],
			}
		);

		return config;
	},
};

export default nextConfig;

[andybuibui]

vercel/next.js#19936

[asgomda]

For anyone having this issue here are the steps I used to resolve it for NextJS 14.2.3

1. Add less-loader support since the Larkmap package requires it

• Install the required packages
  npm install next-compose-plugins next-with-less
• Modify the nextjs.config.mjs or nextjs.config.js file

import withPlugins from "next-compose-plugins";;
import withLess from "next-with-less";
/** @type {import('next').NextConfig} */

const plugins = [
	[
		withLess,
		{
			lessLoaderOptions: {},
		},
	],
];

export default withPlugins(plugins, {
	reactStrictMode: true,
	swcMinify: true,
});

Note: Use require and module.exports instead of import and export default if your next.config file has the extension .js (ie not an ES module)

2. After the first step, you will get an error which says:

Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@antv/larkmap/es/components/ContextMenu/index.js

• This is because, NextJS does not support Global CSS import within node_modules. see here: vercel/next.js/issues/19936

• To solve this issue, install next-remove-imports to remove all style files from node_modules. Then add the removeImports declaration to the nextJS config file.

import withPlugins from "next-compose-plugins";
import removeImports from "next-remove-imports";
import withLess from "next-with-less";

/** @type {import('next').NextConfig} */

const removeImportsF = removeImports({
	test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
	matchImports: "\\.(less|css|scss|sass|styl)$",
});

const nextConfig = {};
const plugins = [
	[
		withLess,
		{
			lessLoaderOptions: {},
		},
	],
];

export default withPlugins(plugins, removeImportsF(nextConfig), {
	reactStrictMode: true,
	swcMinify: true,
});

Note: use require and module.exports if your config file is next.config.js

3. After the second step, you might get an error that says:

ReferenceError: document is not defined
    at __webpack_require__ (/Users/gomda/Desktop/web_graph/city-map/.next/server/webpack-runtime.js:33:43)

This issue arises because LarkMap is a client component and cannot be server-side rendered. To solve this issue, you have to dynamically import the LarkMap component at runtime.

• create the component

// @/components/trajectory/larkmap.tsx
"use client";
import type { LarkMapProps } from "@antv/larkmap";
import { LarkMap } from "@antv/larkmap";
import * as React from "react";

const config: LarkMapProps = {
	mapType: "Mapbox", // using mapbox here
	mapOptions: {
		style: "light",
		center: [120.210792, 30.246026],
		zoom: 9,
		token:
			"Your Map token", // token from the map library
	},
};
const LarkmapGlobe = () => {
	return (
		<LarkMap
			{...config}
			className="h-9/10"
			style={{ width: "100vw", height: "100vh" }}
		>
			<h2 style={{ position: "absolute", left: "10px" }}>LarkMap</h2>
		</LarkMap>
	);
};

export default LarkmapGlobe;

• Dynamically import the component into your page.tsx in your app

"use client";
import type { LarkMapProps } from "@antv/larkmap";
import { LarkMap } from "@antv/larkmap";
import dynamic from "next/dynamic";
import * as React from "react";

const Map = dynamic(() => import("@/components/trajectory/larkmap"), {
	ssr: false,
	loading: () => <div>Loading ... </div>,
});


const Larkmap = () => {
	return (
		<div>
			<Map />
		</div>
	);
};

export default Larkmap;

Thats it! The map should now show with no errors.