Comments (3)
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;
from larkmap.
from larkmap.
For anyone having this issue here are the steps I used to resolve it for NextJS 14.2.3
- 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)
- 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
- 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.
from larkmap.
Related Issues (20)
- ImageLayer 高分辨率图片报错🐛 [BUG] HOT 1
- 🐛 [BUG]地图为百度地图时,缩放等级不一致 HOT 1
- 🥰 [FEATURE]LayerSwitchControl组件的poper没有按主题色渲染 HOT 1
- 🐛 [BUG] 官网的钉钉群二维码已失效 HOT 1
- 🐛 [BUG] LayerPopup控制台提示报错 HOT 1
- 🐛 [BUG]ChoroplethLayer中文本的位置不太正常 HOT 4
- 🐛 [BUG]LegendCategories的labels数据一致时控制台key报错 HOT 1
- 🐛 [BUG] LayerPopup展示异常 HOT 1
- 🤔 [QUESTION] gaode 主题无法渲染? HOT 2
- 🐛 [BUG] 部分地图主题替换失效 HOT 1
- 🤔 [QUESTION] 示例代码无法运行 HOT 1
- 🐛 [BUG] useDraw的shape,在切换形状后导致无法绘制 HOT 1
- 🐛 [BUG] marker的onClick的参数类型错误
- 🐛 [BUG] ChoroplethLayer-lable-position,Not at the geometric center point HOT 6
- useDraw cannot enable 🐛 [BUG]
- 🤔 How to correctly render data in json with geometry type MultiPolygon? HOT 2
- 🐛 [BUG]MapLibre 不显示地图 HOT 1
- 🤔 [QUESTION] how to remove the click listener on the layer when removing the layer
- 🤔 [QUESTION] any code API to add context menu in the scene ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from larkmap.