如何将 dc.js 与 next.js 一起使用（通配符导入问题）？答案

【问题标题】：How to use dc.js with next.js (wildcard import issue)?如何将 dc.js 与 next.js 一起使用（通配符导入问题）？
【发布时间】：2022-10-04 20:21:23
【问题描述】：

在 next.js (12.3.1) 应用程序中，我有一个图表组件，我在其中导入和使用 dc.js (7.6.1)：

import * as dc from 'dc'

图表正确显示。但是，以这种方式导入 dc 似乎“破坏”了 Google Chrome 开发工具的调试功能。 Web 应用程序不再在断点处停止。不幸的是，我没有收到来自 next.js 的警告，例如“* 不支持导入”或“调试模式因 'dc' 的导入问题而停止”等。如果我删除 dc 导入，调试将按预期工作。

=> 如何使用 dc.js 和 next.js 而不会在 Google Chrome 中出现调试问题？

也许 nextjs 不支持通配符导入？我花了一段时间才发现调试问题是由于 dc 导入引起的……首先认为这可能是 Chrome 开发工具的问题、源映射问题或配置文件的问题。

【问题讨论】：

标签： debugging next.js google-chrome-devtools dc.js

【解决方案1】：

我将导入从图表组件移至 next.js 的 _app.js 文件，并将其作为参数传递给组件。这以某种方式解决了调试问题。

import React from 'react';
import * as dc from 'dc';
import './stylesheet.css'
import 'dc/dist/style/dc.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp({ Component, pageProps }) {
  //dc causes debugging issues when imported in chart components,
  //=> As A workaround, we import dc here and
  //pass it on to the chart components. 
  let params = {...pageProps};
  params['dc'] = dc;
  return <Component {...params} />
}

export default MyApp

=> Next.js 似乎支持* 导入，但不是在应用程序的所有级别上。

【讨论】：