Issue When Importing Dash.js 5 into Our Project

[testeur-990]

We encountered an issue when trying to import Dash.js 5 into our project for testing.

The dashjs folder is present in the node_modules directory of our project, and we import it as follows: import * as dashjs from 'dashjs';

With Dash.js 4.x, this works fine, but with Dash.js 5.0.0, it no longer works.

Could you please assist us?

We noticed that in the package.json of Dash.js 5.0.0 (compared to Dash.js 4.x), the following exports section was added:
"exports": {
".": {
"types": "./index.d.ts",
"import": "./dist/esm/dash.all.debug.esm.js",
"default": "./dist/esm/dash.all.debug.esm.js",
"browser": "./dist/dash.all.min.js",
"script": "./dist/dash.all.min.js"
}
},

If we understand correctly, the dash.all.debug.esm.js file was introduced for browsers that natively support ECMAScript modules. However, what about projects like ours that are used on both older and modern platforms?

For your information, we are using TypeScript in our project, and here are the relevant compilerOptions from our tsconfig.json:
"compilerOptions": {
"baseUrl": ".",
"module": "commonjs",
"moduleResolution": "node",
"target": "es2015",
"lib": ["es2015", "dom"],
"outDir": "lib",
"sourceMap": false,
"declaration": true,
"allowSyntheticDefaultImports": true,
"allowJs": true,
"noImplicitAny": false,
"resolveJsonModule": true,
"typeRoots": ["node_modules/@types"],
"types": ["resize-observer-browser", "jquery", "node"],
"skipLibCheck": true
}

Thank you

[dsilhavy]

Note: We have a related pending PR that changes the build configuration, see #4659.

In any case, your Typescript config uses commonjs modules. We are exporting ES modules in dash.js, does it work if you change the following line:

"module": "esnext"

[dsilhavy]

I added a field require in #4659 to support CommonJS modules: ecbbe7b. This is untested though, would be good to verify after merge.

[testeur-990]

@dsilhavy Thank you for your quick feedback!
Yes, I forgot to mention that we already tested with "module": "esnext", but with import * as dashjs from 'dashjs'; we are still encountering the following error:
Module not found: Error: Package path path/dist/esm/dash.all.debug.esm.js is not exported from package path\node_modules\dashjs (see exports field ...\node_modules\dashjs\package.json)

We will proceed to test ecbbe7b and wait for the mentioned pending PR.

[dsilhavy]

We have a small TypeScript example which also uses import * as dashjs from 'dashjs';: https://github.com/Dash-Industry-Forum/dash.js/tree/development/samples/modules/typescript. In the tsconfig.json we enabled "esModuleInterop": true. Not sure if this solves your issue though.

[testeur-990]

@dsilhavy we tested "esModuleInterop": true, but it did not fix our issue. We will take a look at this project also . thank you

[testeur-990]

Hello @dsilhavy,
While waiting for the pending PR (#4659), and to progress with our validation for dash.js 5, we added the following to our tsconfig:
"paths": {
"dashjs": ["node_modules/dashjs/dist/dash.all.min.js"]
}
With this change, import * as dashjs from 'dashjs'; works now.

However, with dash.js 4, we used to import the MSS library in our project like this:
require('dashjs/dist/dash.mss.debug');
But now it no longer works.

Could you please assist us with this issue?

[dsilhavy]

I have merged #4659 please check if this solves your issue. Also make sure to use the right path, for instance the UMD legacy build is located in dist/legacy/umd/. Some more information is available here: https://dashif.org/dash.js/pages/quickstart/installation.html

[testeur-990]

Hello @dsilhavy ,
We updated our Dash.js to include your latest commits. If I understand correctly, based on your note:
'Also, make sure to use the right path; for instance, the UMD legacy build is located in dist/legacy/umd/',
to use the same library as Dash.js 4, we should import Dash.js like this:

import * as dashjs from 'dashjs/dist/legacy/umd/dash.all.min';
instead of:
import * as dashjs from 'dashjs';

However, this approach does not work because dash.all.min is not exported.

Using import * as dashjs from 'dashjs'; does work now , but it’s unclear which bundle of Dash.js is being imported in this case.

Additionally, we are still experiencing issues with MSS streams that did not work with Dash.js 5 when we try to import the library using:
require('dashjs/dist/legacy/umd/dash.mss.min');
(as we did with Dash.js 4, but with the new path),

Could you please help us resolve this? We’d appreciate also your guidance on how to properly configure MSS with Dash.js 5.

[testeur-990]

@dsilhavy
Additionally, with your latest update to index.d.ts, we encountered some issues. We’re not sure why these changes were made, but we made some adjustments on our side to move forward and avoid being blocked.

Specifically:

The export type capabilitiesFilter was removed in Dash.js 5.0.0. To address this, we added the following on our side:

export type CapabilitiesFilter = (representation: Representation) => boolean;

export interface ICapabilitiesFilter {
setConfig(config: object): void;
filterUnsupportedFeatures(manifest: object): Promise;
}

This aligns with how it was implemented in Dash.js 4.

For QualityChangeRenderedEvent and QualityChangeRequestedEvent, in Dash.js 5.0.0, you replaced newQuality and oldQuality with newRepresentation and oldRepresentation in the code. However, the type definitions still refer to newQuality and oldQuality. You should update the definitions to:

newRepresentation: Representation;
oldRepresentation: Representation;

This ensures consistency with the updated implementation.

Could you confirm these changes or provide clarification?

[dsilhavy]

Thanks for reporting the issues

Using import * as dashjs from 'dashjs'; does work now , but it’s unclear which bundle of Dash.js is being imported in this case.

This will use dist/modern/esm/dash.all.min.js as the package.json defines the following export:
"import": "./dist/modern/esm/dash.all.min.js"

Additionally, we are still experiencing issues with MSS streams that did not work with Dash.js 5 when we try to import the library using:
require('dashjs/dist/legacy/umd/dash.mss.min');
(as we did with Dash.js 4, but with the new path),

I don't have insights into your build system but I added an example here: https://github.com/Dash-Industry-Forum/dash.js/tree/development/samples/modules/typescript-smooth. The mss bundle is not exported in the package.json but you can include it directly from the node_modules. Check: https://github.com/Dash-Industry-Forum/dash.js/blob/development/samples/modules/typescript-smooth/src/index.ts

import '../node_modules/dashjs/dist/modern/esm/dash.mss.min.js'

Additionally, with your latest update to index.d.ts, we encountered some issues.

Thanks, they should be fixed in #4671

[testeur-990]

@dsilhavy Thank your for your feedback , I will test your latest changes ,check the sample for MSS and get back to you to confirm if our issue is resolved.