Can I use fallback files such as '*.expo.js' when running `yarn web`?

Please provide the following:

  1. SDK Version: 36
  2. Platforms(Android/iOS/web/all): Web

Hi All,

I have ejected my app to a bare project as I must use MapboxGL and so have no alternative.

Since code using Native modules fails in Expo Client, I have followed instructions to create a fallback for the MapScreen - where MapboxGL is imported- as explained in docs. So, I have a Map.js that renders a MapView.MapboxGL and a Map.expo.js that renders a basic View with the message Mapbox not available.

It all works well regarding to run the App either via Expo Client or React Native CLI for both iOS and Android. Thank you for all the documents and replies to issues on this Forum which really helped me getting trough.

Sadly, I am not able to run the project on Web with ‘yarn web’ for example. It looks like webpack doesn’t know what loader it should use for files with extension ‘*.expo.js’. This is my best guess, but I am not quite familiar with webpack, too. I tried customizing the webpack.config.js to add a rule to the module entry, but it didn’t go to plan. If I must specify a loader for this type of file, what loader would be?

// This shows in the browser
Failed to compile
$/app/screens/MapScreen.expo.js 7:3
Module parse failed: Unexpected token (7:3)
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={{
| 					flex: 1,
// Full code of MapScreen.expo.js
import * as React from 'react'
import { Text, View } from 'react-native'

export default class MapScreen extends React.Component {
	render() {
		return (
			<View
				style={{
					flex: 1,
					backgroundColor: '#000',
					alignItems: 'center',
					justifyContent: 'center'
				}}
			>
				<Text style={{ color: '#fff' }}>Mapbox map not available!</Text>
			</View>
		)
	}
}

I could really use some help here. Thank you.

Luisa