React-Native-Web configuration issue: Module not found: Error: Can't resolve 'react-native-screens'

Hi,

I'm trying to render a react native app for web using react-native-web, babel, and webpack. When I start webpack, I get the error below. As you can see from my web.config.js, I'm included the react native modules I need for rendering the custom react native code. The react-native-screens module is installed, as you can see from the package.json.

My question why the compiler is complaining about the react-native-screens dependency in the node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js if that module is installed?

Any pointers appreciated.

error: ERROR in ./node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js Module not found: Error: Can't resolve 'react-native-screens' in '~/ReactNative/RNProto1/node_modules/react-navigation-stack/dist/views/StackView' @ ./node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js 1:931-962 @ ./node_modules/react-navigation-stack/dist/index.js @ ./node_modules/react-navigation/src/react-navigation.js @ ./mydemo/demo.js @ ./index.web.js


babel.config.js:

module.exports = {
  presets: ["@babel/env", "module:metro-react-native-babel-preset"],
  plugins: []
};

Select allOpen in new window

package.json:

babel.config.js:

module.exports = {
  presets: ["@babel/env", "module:metro-react-native-babel-preset"],
  plugins: []
};

Select allOpen in new window

web.config.js:

const fs = require('fs');
const isDev = true;
const path = require('path');
const webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
module.exports = {
  entry: './index.web.js',
  output: {
      path: path.join(__dirname, '/web'),
      filename: "bundle.js",
      publicPath: '/'
  },
  devServer: {
      inline: false,
      contentBase: path.join(__dirname, '/web'),
  },
  resolve: {
    alias: {
      'react-native': 'react-native-web'
    },
    // Resolve to iOS-specific components
    extensions: ['.ios.js', '.android.js', '.js', '.json']
  },
  target: 'node', // in order to ignore built-in modules like path, fs, etc. 
  module: {
    rules: [
      // Babel loader config
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.join(__dirname, '/index.web.js'),
          path.join(__dirname, '/app'),
          path.join(__dirname, '/demo'),
          path.join(__dirname, '/src'),
          path.join(__dirname, '/node_modules/react-native-dismiss-keyboard'),
          path.join(__dirname, '/node_modules/react-native-drawer-layout'),
          path.join(__dirname, '/node_modules/react-native-drawer-layout-polyfill'),
          path.join(__dirname, '/node_modules/react-native-linear-gradient'),
          path.join(__dirname, '/node_modules/react-native-safe-area-view'),
          path.join(__dirname, '/node_modules/react-native-screens'),
          path.join(__dirname, '/node_modules/react-native-svg'),
          path.join(__dirname, '/node_modules/react-native-tab-view'),
          path.join(__dirname, '/node_modules/react-navigation'),
          path.join(__dirname, '/node_modules/react-navigation-deprecated-tab-navigator'),
          path.join(__dirname, '/node_modules/react-navigation-drawer'),
          path.join(__dirname, '/node_modules/react-navigation-stack'),
          path.join(__dirname, '/node_modules/react-navigation-tabs')
        ],
        options: {
          plugins: [
          ],
          presets: ['@babel/env', 'module:metro-react-native-babel-preset'],
          babelrc: false
        }  
      },
      // Image loader config
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      }, 
      // CSS loader config
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Select allOpen in new window