Unable to run react-native (0.70.15) and react-native-web (0.18) with RNVI (10.0.3)

[JavanHuang]

• [x] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [X] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

// package.json

"react-native": "0.70.15",
"react-native-vector-icons": "~10.0.3",
"react-native-web": "~0.18.12",

// webpack.config.js

const compileNodeModules = [
  'react-native',
  'react-native-vector-icons',
  'react-native-web',
  // ...
].map((moduleName) => path.resolve(appDirectory, `../../node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.js$|tsx?$/,
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'src/index.web.tsx'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, '../core'),
    ...compileNodeModules
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        [
          'babel-plugin-styled-components',
          {
            displayName: !isProduction,
            pure: true
          }
        ],
        process.env.NODE_ENV !== 'production' && 'react-refresh/babel'
      ].filter(Boolean)
    }
  }
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack'
    }
  ]
};

const ttfLoaderConfiguration = {
  test: /\.ttf$/,
  loader: 'url-loader', // or directly file-loader
  include: [path.resolve(appDirectory, '../../node_modules/react-native-vector-icons')]
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false
    }
  }
};

const cssLoaderConfiguration = {
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'postcss-loader']
};

module.exports = {
  target: 'web',
  entry: [
    path.resolve(appDirectory, 'index.web.js')
  ],
  output: {
    filename: 'assets/js/[name].bundle.[contenthash:8].js',
    chunkFilename: 'assets/js/[name].chunk.[contenthash:8].js',
    path: path.resolve(__dirname, `${APP_ENV}`),
    publicPath: `/${APP_ENV}/`
  },
  resolve: {
    extensions: ['.web.tsx', '.web.ts', 'web.js', '.tsx', '.ts', '.js', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@app/core': path.resolve(__dirname, '../core/packages'),
      'react-native$': 'react-native-web',
      '../Utilities/Platform': 'react-native-web/dist/exports/Platform'
    }
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      svgLoaderConfiguration,
      ttfLoaderConfiguration,
      imageLoaderConfiguration,
      cssLoaderConfiguration
    ]
  },

Description

While trying to upgrade react-native from 0.66 to 0.70 in a monorepo setup, I was able to compile the webpage using react-native-web but there was an uncaught TypeError that causes the webpage to display a white page.

Uncaught TypeError: Cannot read properties of undefined (reading 'get')
    at ../../node_modules/react-native-vector-icons/lib/NativeRNVectorIcons.js (NativeRNVectorIcons.js:21:37)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ../../node_modules/react-native-vector-icons/lib/ensure-native-module-available.js (ensure-native-module-available.js:1:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ../../node_modules/react-native-vector-icons/lib/create-icon-set.js (create-icon-set.js:5:1)
    at options.factory (react refresh:6:1)

I suspect that the lib/NativeRNVectorIcons.web.js is not mocking lib/NativeRNVectorIcons.js, not sure why at this point. Currently my only resolution for this would be to stick to RNVI 9.2.0. Upgrading react-native-web from 0.18 to 0.19 would be a huge change and I ideally do not want to go on with that at the moment since the react-native upgrade has been a tedious process.

Hope this is enough information to help me diagnose my issue 😅 Thank you in advance. Please feel free to ask for more info if required.

[johnf]

@JavanHuang I suspect as you allude to that the .web version isn't being loaded when it should be. Which would point to a webpack issue. Your config does look about right though.

Does RNVI 9.2.0 work? I did quick diff and there aren't any changes I can see that would impact this

[JavanHuang]

@johnf Thanks for the follow-up! I'm currently using RNVI 9.2.0 within my project so there is no impact in downgrading from 10.0.3 to 9.2.0.

However, I noticed there was a new release of RNVI 10.1.0. Would it be recommended to upgrade react-native to >=0.71 in order to make it compatible to RNVI >=10.1.0?

[johnf]

@JavanHuang You could give that a try, but I can't guarantee it will work as I'm not sure why it isn't currently working for you