Next.js集成Visx库遇require() ES模块错误求解决方案

方案1：配置Next.js转译Visx及依赖模块 #

Next.js的transpilePackages配置可以让框架把指定第三方模块当作项目代码的一部分编译，自动处理模块格式冲突，无需修改库文件。

在next.config.js中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@visx/scale', 'd3-scale'],
}

module.exports = nextConfig

方案2：动态导入图表组件并禁用SSR #

如果图表仅在客户端渲染，用Next.js的dynamic函数动态导入包含Visx比例尺的组件，避免服务端执行时触发模块导入错误。

示例代码：

import dynamic from 'next/dynamic'

// 仅在客户端加载图表组件，禁用服务端渲染
const ChartComponent = dynamic(() => import('../components/YourChart'), {
  ssr: false,
})

export default function Page() {
  return <ChartComponent />
}

注意：确保所有Visx比例尺的导入都放在这个动态加载的组件内部，不要在服务端执行的代码中直接引入。

方案3：降级d3-scale到兼容CommonJS的版本 #

新版本d3-scale可能已完全转为ES模块，导致Visx内部的require调用出错。可以尝试降级到支持CommonJS的旧版本（如v3.x系列）：

npm install d3-scale@3.3.0
# 或使用yarn
yarn add d3-scale@3.3.0

降级前需确认Visx版本与旧版d3-scale的兼容性，避免API不兼容问题。

关于"Cannot use import statement outside a module"错误的处理 #

该错误源于模块格式不统一（CommonJS中使用ES模块语法，或ES模块被当作CommonJS处理），解决核心是统一模块格式：

• 无需手动在Next.js项目的package.json中添加"type": "module"，框架已默认处理模块系统
• 配合方案1的transpilePackages配置，让相关模块被转译为统一格式即可解决。

内容的提问来源于stack exchange，提问作者Juan Manuel Jurado