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

6mzjoqzu  于 2022-11-14  发布在  其他
关注(0)|答案(1)|浏览(107)

在next.js(12.3.1)应用程序中,我导入并使用了一个图表组件dc.js(7.6.1):

import * as dc from 'dc'

图表正确显示,在导入语句中使用星号/通配符似乎是唯一的方法。
然而,以这种方式导入dc似乎**“破坏”了Google Chrome Dev工具的调试功能**。Web应用程序不再在断点处停止。不幸的是,我没有收到来自next.js的警告,如“* imports is not supported”或“Debug mode stopped due to a import issue with 'dc'”。如果我删除dc导入,调试将按预期再次工作。
=〉如何使用dc.js与next.js而不会在Google Chrome开发工具中出现调试问题?
也许nextjs不支持星号/通配符导入?我花了一段时间才发现调试问题是由于dc导入造成的...最初以为是Chrome Dev工具的问题,源Map问题或者配置文件的问题。

l5tcr1uw

l5tcr1uw1#

我将导入从图表组件移到了next.js的_app.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似乎支持*导入,但不是在应用程序的所有级别上都支持?!

相关问题