Can not build due to lightweight-charts

[yoncise]

I'm integrating TradingView lightweight-charts into theia extension. The lightweight-charts version is 5.0.7. The building error is Module not found: Error: Package path . is not exported from package xxxx.

It seems that I got this error because lightweight-charts is a ESM module. Is there any workround to fix this?
Thanks

[msujew]

Hey @yoncise,

Theia supports ESM modules, since webpack will just recompile them into whatever format is required by the runtime.

Can you provide a reproducible example?

[yoncise]

Hi, here is a simple demo for this problem. In the mywidget-widget.tsx I import lightweight-charts with version 5.0.7.

The building error:

ERROR in ../hello-world/lib/browser/mywidget-widget.js 18:29-58
Module not found: Error: Package path . is not exported from package /xxxxxxx/my-theia-app/node_modules/lightweight-charts (see exports field in /xxxxxxx/my-theia-app/node_modules/lightweight-charts/package.json)
 @ ../hello-world/lib/browser/mywidget-frontend-module.js 7:26-54
 @ ./src-gen/frontend/index.js 112:30-88

[msujew]

Weird, webpack claims to support their conditional syntax used in the package exports of the lightweight-charts library. I'm a bit confused by this.

Anyhow, I managed to make this work by adjusting the webpack.config.js like this:

const configs = require('./gen-webpack.config.js');
const nodeConfig = require('./gen-webpack.node.config.js');
const path = require('path');

for (const config of configs) {
    config.resolve.alias = {
        // This allows webpack to correctly resolve the package, even though it can't understand the package exports
        'lightweight-charts': path.resolve(__dirname, '../node_modules/lightweight-charts/dist/lightweight-charts.production.mjs'),
    }
}

module.exports = [
    ...configs,
    nodeConfig.config
];

[yoncise]

Thanks! Everything works fine now!