How to use dc.js with next.js (asterisk/wildcard import issue)?

Question

Within a next.js (12.3.1) application I have a chart component where I import and use dc.js (7.6.1):

import * as dc from 'dc'

The chart is correctly shown and using an asterisk/wildcard in the import statement seems to be the only way to do so.

However, importing dc that way seems to "destroy" the debugging feature of Google Chrome Dev tools. The web application does not stop at breakpoints any more. And unfortunately, I do not get a warning from next.js, like "* imports are not supported" or "Debug mode stopped due to an import issue with 'dc'". If I remove the dc import, the debugging works again as expected.

=> How to use dc.js with next.js without getting debugging issues in Google Chrome Dev Tools?

Maybe nextjs does not support asterisk/wildcard imports? It took me a while to find out that the debugging issue is due to the dc import... First thought it would be an issue with Chrome Dev Tools, a source mapping issue or an issue with a configuration file.

Answer 1

I moved the import from my chart component to the _app.js file of next.js. Then I pass dc down to the components as a property. That strategy somehow solves the debugging issue, don't know why exactly.

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 seems to support * imports, but not on all levels of the application ?!