javascript – React Native and webpack

it has been a while since I did some web coding. I tried to build a simple app using React Native. Once I started I wondered how I could view the app in the browser. Some LLMing brought me to a combination of webpack and react-native-web.

So I essentially have a base folder where I have my ios, android and web folder. In the web folder I have a index.html and a index.js file.

Here is their content:

index.html

index.js

// web/index.js
import { AppRegistry } from 'react-native';
import App from '../App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  rootTag: document.getElementById("root")
});

My webpack.config.js looks like this:

const path = require('path');

module.exports = {
  entry: './web/index.js',
  output: {
    publicPath: path.resolve(__dirname, 'web'),
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i, 
        loader: 'file-loader',
        options: {
          name: '/public/icons/[name].[ext]'
        }
      }
    ],
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.js', '.jsx'],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'web'),
    },
    compress: true,
    port: 9000,
  },
};

Here’s my App.js

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import CreatePostScreen from './screens/CreatePostScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
        
        
      
    
  );
}

export default App;

When I start webpack using webpack serve --mode development --open I get a blank HTML page. So it seems my actual App is never initialized. The only error I see in the console for webpack is:

WARNING in ./node_modules/react-native-screens/lib/module/components/ScreenStackItem.js 36:183-198
export 'FooterComponent' (imported as 'FooterComponent') was not found in './ScreenFooter' (possible exports: default)
 @ ./node_modules/react-native-screens/lib/module/index.js 19:0-74 19:0-74
 @ ./node_modules/@react-navigation/stack/lib/commonjs/views/Screens.js 14:12-43
 @ ./node_modules/@react-navigation/stack/lib/commonjs/views/Stack/CardStack.js 15:15-39
 @ ./node_modules/@react-navigation/stack/lib/commonjs/views/Stack/StackView.js 15:17-42
 @ ./node_modules/@react-navigation/stack/lib/commonjs/index.js 61:17-54
 @ ./App.js 1:274-308
 @ ./web/index.js 1:156-173

But that’s only a warning isn’t it?