如何使用dc.js与next.js (星号/通配符导入问题)？

Question

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

import * as dc from 'dc'

图表显示正确，在import语句中使用星号/通配符似乎是唯一的方法。

然而，以这种方式导入dc似乎会“破坏”Google工具的调试功能。web应用程序不再停留在断点处。不幸的是，我没有收到来自next.js的警告，比如"* imports不支持“或"Debug模式由于‘dc’的导入问题而停止”。如果删除dc导入，调试将按预期再次工作。

=>如何在工具中不出现调试问题的情况下与next.js一起使用dc.js？

也许nextjs不支持星号/通配符导入？我花了一段时间才发现调试问题是由于dc导入.最初认为这将是Chrome工具的问题、源映射问题或配置文件的问题。

Answer 1

我将导入从图表组件移到next.js的next.js文件中。然后，我将dc作为属性传递给组件。这种策略以某种方式解决了调试问题，不知道确切原因。

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似乎支持*导入，但不是在应用程序的所有级别上?！