React-Native-Web configuration issue: Failed to compile 'react-native-media-controls' - react-native

Question

I'm trying to convert a project for react-native-web which is created in react-native. So I started adding react-native-web by following the docs. When I launch it in the browser after Expo start (Using this command - EXPO_WEB_DEBUG=true expo build:web) it gives me an error for some libraries.
Like below errors
Failed to compile.
./node_modules/react-native-media-controls/dist/react-native-media-controls.esm.js
Cannot find module: './assets/ic_fullscreen.png'. Make sure this package is installed.
You can install this package by running: yarn add ./assets/ic_fullscreen.png.
Failed to compile.
./node_modules/#react-native-community/progress-view/js/index.js
Cannot find module: './ProgressView'. Make sure this package is installed.
You can install this package by running: yarn add ./ProgressView.
So my question is this - Is there any way to use 2 different libraries 1 for the web and 1 for mobile platforms? If Yes, how we can do this? Can anyone guide me in this?
Update -
I followed another article and now I'm getting these errors
ERROR in ./node_modules/#react-native-community/masked-view/js/MaskedView.js 16:14
Module parse failed: Unexpected token (16:14)
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
| const RNCMaskedView = requireNativeComponent<any>('RNCMaskedView');
|
> import { type MaskedViewProps } from './MaskedViewTypes';
|
| /**
# ./node_modules/#react-native-community/masked-view/index.js 1:0-41 3:15-25
# ./node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js 1:1702-1748
# ./src/Screens/TestScreens/AnalysisScreens/LeaderBoardScreens/TestResultScreen.tsx 1:1235-1279
# ./src/Navigation/HomeNavigator.tsx 1:844-929
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/#react-native-community/progress-view/js/index.js 3:0-55
Module not found: Error: Can't resolve './ProgressView' in '/Users/sysquare/Desktop/pariksha-native-app-web/node_modules/#react-native-community/progress-view/js'
# ./node_modules/react-native-pdf/index.js 1:1413-1461
# ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
# ./src/Navigation/RootNavigator.tsx 1:1358-1393
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/#sentry/react-native/dist/js/touchevents.js 74:16
Module parse failed: Unexpected token (74:16)
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
| */
| render() {
> return (<View style={touchEventStyles.wrapperView}
| // eslint-disable-next-line #typescript-eslint/no-explicit-any
| onTouchStart={this._onTouchStart}>
# ./node_modules/#sentry/react-native/dist/js/index.js 14:0-75 14:0-75 14:0-75
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native-webview/lib/WebView.js 7:36
Module parse failed: Unexpected token (7:36)
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
| // implementation which is produced by Expo SDK 37.0.0.1 implementation, with
| // similar interface than the native ones have.
> var WebView = function () { return (<View style={{
| alignSelf: 'flex-start',
| borderColor: 'rgb(255, 0, 0)',
# ./node_modules/react-native-webview/index.js 1:0-36 3:0-19 4:15-22
# ./src/Screens/WebView/TermsAndCondition.tsx 1:469-500
# ./src/Navigation/RootNavigator.tsx 1:1628-1675
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js 15:19
Module parse failed: Unexpected token (15:19)
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
| const MessageQueue = require('./MessageQueue');
|
> const BatchedBridge: MessageQueue = new MessageQueue();
|
| // Wire up the batched bridge on the global object so that we can call into it.
# ./src/NativeComponents/MathView/index.tsx 1:999-1060
# ./src/Screens/TestScreens/TestView.tsx 1:455-497
# ./src/Screens/TestScreens/TestScreen.tsx 1:3229-3250
# ./src/Navigation/HomeNavigator.tsx 1:1184-1228
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js 19:47
Module parse failed: Unexpected token (19:47)
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
| * View component and renders its children.
| */
> class UnimplementedView extends React.Component<$FlowFixMeProps> {
| render(): React.Node {
| // Workaround require cycle from requireNativeComponent
# ./node_modules/#react-native-community/progress-bar-android/js/RNCProgressBarAndroid.js 11:0-98
# ./node_modules/#react-native-community/progress-bar-android/js/index.js 1:0-63 1:0-63
# ./node_modules/react-native-pdf/index.js 1:1339-1394
# ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
# ./src/Navigation/RootNavigator.tsx 1:1358-1393
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/getDevServer.js 13:23
Module parse failed: Unexpected token (13:23)
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
| import NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';
|
> let _cachedDevServerURL: ?string;
| let _cachedFullBundleURL: ?string;
| const FALLBACK = 'http://localhost:8081/';
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 84:31-91
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/parseErrorStack.js 13:12
Module parse failed: Unexpected token (13:12)
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
| 'use strict';
|
> import type {StackFrame} from '../NativeExceptionsManager';
| import type {HermesParsedStack} from './parseHermesStack';
|
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 24:36-99
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js 15:12
Module parse failed: Unexpected token (15:12)
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
| const getDevServer = require('./getDevServer');
|
> import type {StackFrame} from '../NativeExceptionsManager';
|
| export type CodeFrame = $ReadOnly<{
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 48:46-115
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js 19:12
Module parse failed: Unexpected token (19:12)
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
| const {pickScale} = require('./AssetUtils');
|
> import type {ResolvedAssetSource} from './AssetSourceResolver';
|
| let _customSourceTransformer, _serverURL, _scriptURL;
# ./src/NativeComponents/VideoPlayer/Video1.js 1:1877-1935
# ./src/Components/Video/VideoPlayer.tsx 1:1062-1114
# ./src/Screens/VideoPlayer/VideoPlayer.tsx 1:1452-1497
# ./src/Navigation/RootNavigator.tsx 1:676-721
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./storybook/stories/Button/Button.stories.tsx 8:5
Module parse failed: Unexpected token (8:5)
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
| import Button from '../../../src/DesignComponents/ButtonGroup/Button';
|
> type Props = ButtonPropTypes;
| export const button: Props = {
| active: false,
# ./storybook/stories/index.js 1:0-33
# ./storybook/index.js 13:2-22
# ./src/StoryBookDeviceUI.tsx 1:263-286
# ./src/Navigation/HomeNavigator.tsx 1:1253-1284
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./storybook/stories/Welcome/Welcome.stories.js 6:55
Module parse failed: Unexpected token (6:55)
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
| import Welcome from '.';
|
> storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
# ./storybook/stories/index.js 2:0-35
# ./storybook/index.js 13:2-22
# ./src/StoryBookDeviceUI.tsx 1:263-286
# ./src/Navigation/HomeNavigator.tsx 1:1253-1284
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.52.0 compiled with 12 errors in 7213 ms

Answer 1

Many react native packages are not transpiled to es6 and include things that aren't compatible with the web. Its sometimes necessary to parse them with babel before they will run on the web.
if you run this expo will generate a webpack config for you
expo customize:web
then you can add modules to the babel loader, for example:
const createExpoWebpackConfigAsync = require("#expo/webpack-config");
// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,
babel: {
dangerouslyAddModulePathsToTranspile: [
// Add package names here to ensure they are transpiled
"#react-native-community/masked-view",
],
},
},
argv
);
return config;
};
You might notice that this is a "dangerous" method, so use with caution.
The documentation for this config option is here https://github.com/expo/expo-cli/blob/master/packages/webpack-config/README.md