Adding react-native-vector-icons

[toto1384]

rnvi works without being in a monorepo, but when it is in one it throws this:

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
| 
|       return (
>         <Text selectable={false} {...props}>
|           {glyph}
|           {children}

How did I test it? I tried importing a screen from the /packages/app with an icon in it and the error was shown. When I put the screen directly into the /packages/next/pages/index.tsx file it works perfectly

Here is my next.config.js file

/** @type {import('next').NextConfig} */
const path = require("path");

const withPlugins = require('next-compose-plugins')
// Necessary to handle statically imported images
const withImages = require('next-images');
// Necessary to handle statically imported fonts
const withFonts = require('next-fonts');

const withTM = require('next-transpile-modules')([
    // 'react-native-paper',
    'react-native-vector-icons',
  'react-native-svg'
],{resolveSymlinks:true});

module.exports = withPlugins(
  [
    withTM, withFonts, withImages,
  ],
  {
      devIndicators: {
        autoPrerender: false
      },
      enableSvg: true,
      // Allows us to access other directories in the monorepo
      experimental: {
        externalDir: true,
        // concurrentFeatures: true,
      },
      // This feature conflicts with next-images
      images: {
        disableStaticImages: true,
      },
      webpack: (config, options) => {
        config.resolve.alias = {
          ...(config.resolve.alias || {}),
          // Transform all direct `react-native` imports to `react-native-web`
          'react-native$': 'react-native-web',
          'recyclerlistview$': 'recyclerlistview/web',
        }
        config.resolve.extensions = [
          '.web.js',
          '.web.ts',
          '.web.tsx',
          ...config.resolve.extensions,
        ]

        if (options.isServer) {
          config.externals = ['react', 'react-native-web', ...config.externals];
        }
        config.resolve.alias['react'] = path.resolve(__dirname, '.', 'node_modules', 'react');
        config.resolve.alias['react-native-web'] = path.resolve(__dirname, '.', 'node_modules', 'react-native-web');

        config.module.rules.push(
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [ 'url-loader?limit=10000', 'img-loader' ]
          },
          {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'url-loader',
              }
            ],
            include: path.resolve(__dirname, '../app/node_modules/react-native-vector-icons')
            }
        )

        return config;
      }

  }
)

[AbdulBsit]

Hey @toto1384 , Have you figured it out?

[toto1384]

It's a low priority for my client right now so kind of gave up on it for the time being

You might want to have a look at https://capacitorjs.com/. I AM NOT SAYING IT IS BETTER, OR GOOD AT ALL, just that I've heard about it on the interwebs :))