React CRA - Module parse failed (media-stream-library.min.js)

[Taerarenai]

Describe the bug The title pretty much sums it up. I'm trying to test the basic player (or any player for that matter) and it fails to compile.

./node_modules/media-stream-library/dist/media-stream-library.min.js 8142:39
Module parse failed: Unexpected token (8142:39)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         _controlURL(e) {
|           if (void 0 !== e && /^[^:]+:\/\//.test(e)) return e;
>           const t = this._contentBase ?? this._contentLocation ?? this.uri;
|           if (null == t) throw new Error("relative or missing control attribute but no base URL available");
|           return void 0 === e || "*" === e ? t : new URL(e, t).href;

To Reproduce

Steps to reproduce the behavior:

1. Install React using CRA (JS or TypeScript)
2. Install dependencies (luxon & styled-components)
3. Import a player (BasicPlayer) and add the component in react
4. Run the dev server (npm start)

Environment (please complete the following information):

• OS: Windows
• Node V: 12.9.8
• Version: media-stream-player 5.3.0

Additional context As mentioned, this is an extremely clean CRA project and I've tried both JS and TS (thinking at first it had something to do with styled-components not working without config on typescript)

[parthverma68]

yes, i am facing the same issue with node v :12 and npm v:5

Module parse failed: Unexpected token (2:176495) node_modules/media-stream-library/dist/media-stream-library.min.js 2:176495 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

[steabert]

Do you have an example repository with your source? It's odd that it would try to import the bundle (which shouldn't need any transpiling), as the default entry point is now dist/esm.

[parthverma68]

yes, i am facing the same issue with node v :12 and npm v:5

Module parse failed: Unexpected token (2:176495) node_modules/media-stream-library/dist/media-stream-library.min.js 2:176495 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

ERROR in ./node_modules/media-stream-player/dist/esm/HttpMp4Video.js Module not found: Error: Can't resolve 'media-stream-library' in 'C:\Users\Parth\Desktop\ddgitlab\dashboard\frontEnd\node_modules\media-stream-player\dist\esm' @ ./node_modules/media-stream-player/dist/esm/HttpMp4Video.js 4:0-49 82:36-45 @ ./node_modules/media-stream-player/dist/esm/PlaybackArea.js @ ./node_modules/media-stream-player/dist/esm/index.js @ ./src/modules/Dashboard/components/Widgets/components/TextWidgets/Text/TextWidget.js @ ./src/modules/Dashboard/components/Widgets/components/WidgetRenderer.js @ ./src/modules/Dashboard/components/Widgets/WidgetContent.js @ ./src/modules/Dashboard/components/Widgets/WidgetContainer.js @ ./src/modules/Dashboard/components/DashboardRGL.js @ ./src/modules/Dashboard/components/DashboardContent.js @ ./src/modules/Dashboard/components/Dashboard.js @ ./src/modules/Dashboard/components/DashboardWrappedWithHistorianContext.js @ ./src/modules/Dashboard/index.js @ ./src/app.js @ ./src/test.js @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src/test

ERROR in ./node_modules/media-stream-player/dist/esm/metadata.js Module not found: Error: Can't resolve 'media-stream-library' in 'C:\Users\Parth\Desktop\ddgitlab\dashboard\frontEnd\node_modules\media-stream-player\dist\esm' @ ./node_modules/media-stream-player/dist/esm/metadata.js 1:0-71 14:26-31 24:27-37 25:29-39 26:25-36 @ ./node_modules/media-stream-player/dist/esm/WsRtspVideo.js @ ./node_modules/media-stream-player/dist/esm/PlaybackArea.js @ ./node_modules/media-stream-player/dist/esm/index.js @ ./src/modules/Dashboard/components/Widgets/components/TextWidgets/Text/TextWidget.js @ ./src/modules/Dashboard/components/Widgets/components/WidgetRenderer.js @ ./src/modules/Dashboard/components/Widgets/WidgetContent.js @ ./src/modules/Dashboard/components/Widgets/WidgetContainer.js @ ./src/modules/Dashboard/components/DashboardRGL.js @ ./src/modules/Dashboard/components/DashboardContent.js @ ./src/modules/Dashboard/components/Dashboard.js @ ./src/modules/Dashboard/components/DashboardWrappedWithHistorianContext.js @ ./src/modules/Dashboard/index.js @ ./src/app.js @ ./src/test.js @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src/test

ERROR in ./node_modules/media-stream-player/dist/esm/utils/fetchSDP.js Module not found: Error: Can't resolve 'media-stream-library' in 'C:\Users\Parth\Desktop\ddgitlab\dashboard\frontEnd\node_modules\media-stream-player\dist\esm\utils'
@ ./node_modules/media-stream-player/dist/esm/utils/fetchSDP.js 1:0-54 3:25-38 @ ./node_modules/media-stream-player/dist/esm/utils/index.js @ ./node_modules/media-stream-player/dist/esm/index.js @ ./src/modules/Dashboard/components/Widgets/components/TextWidgets/Text/TextWidget.js @ ./src/modules/Dashboard/components/Widgets/components/WidgetRenderer.js @ ./src/modules/Dashboard/components/Widgets/WidgetContent.js @ ./src/modules/Dashboard/components/Widgets/WidgetContainer.js @ ./src/modules/Dashboard/components/DashboardRGL.js @ ./src/modules/Dashboard/components/DashboardContent.js @ ./src/modules/Dashboard/components/Dashboard.js @ ./src/modules/Dashboard/components/DashboardWrappedWithHistorianContext.js @ ./src/modules/Dashboard/index.js @ ./src/app.js @ ./src/test.js @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src/test

@steabert the problem is media-stream-player components having problem resolving media-stream-library...earlier also media-stream-library was causing the issue. if we try to npm i media-stream-library@latest we have same issue of need appropriate loader to handle this file type...

[parthverma68]

@steabert the problem was the media-stream-player is unable to decide which minified lib of media-stream-library to pic (node or web)

create-react-app have very robust webpack config...but for app created without creat-react-app we need to configure to resolve path of media-stream-library

it can be done by simpley adding this code

resolve: { // configuration options alias: { "media-stream-library": "media-stream-library/dist/esm/index.browser" } }

[SampsaKaskela]

Also have clean CRA project and just adding following line gives an error. I have version 7.0.0 of media-stream-player.

import { Player } from 'media-stream-player';

I was able to solve this issue by using react-app-rewired and adding @parthverma68 solution to overrides like this.

/* config-overrides.js */

module.exports = function override(config, env) {
    config.resolve.alias = {
        ...config.resolve.alias,
        'media-stream-library': 'media-stream-library/dist/esm/index.browser'
    };
    return config;
};

Not ideal but this is one way to get it to work. Would be nice if this was not required.

[lekoaf]

Can also confirm that something is fishy.

Clean CRA install with luxon, styled-components and media-stream-library.

yarn start

Failed to compile.

./node_modules/media-stream-library/dist/media-stream-library.min.js 7851:38
Module parse failed: Unexpected token (7851:38)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|               if (i.type === k.ISOM) {
|                 if (this._done = s, void 0 !== i.tracks || void 0 !== i.mime) {
>                   const o = i.tracks ?? [],
|                         s = o.map(e => e.mime).filter(e => e),
|                         a = 0 !== s.length ? s.join(", ") : "avc1.640029, mp4a.40.2",

Does @Tigge or @barnomasoz have any ideas?