I am getting error, while implementing react-native-paper on react-native-web

Question

This link I used to implement for paper-provider https://callstack.github.io/react-native-paper/using-on-the-web.html.

<PaperProvider>
  <App />
</PaperProvider>

After copied PaperProvider I am getting these error..

ERROR in ./src/index.tsx Module not found: Error: Can't resolve 'MaterialCommunityIcons.ttf' in 'D:\Sentia Care\My Project\react-native\hybrid-react-app\packages\web_app\src' @ ./src/index.tsx 16:106-143

Answer 1

Configure babel-loader Next, we want to tell babel-loader to compile react-native-paper and react-native-vector-icons. We would also want to disable reading the babel configuration files to prevent any conflicts.

First install the required dependencies:

yarn add --dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

Now, add the following in the module.rules array in your webpack config:

{
  test: /\.js$/,
  exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
  use: {
    loader: 'babel-loader',
    options: {
      // Disable reading babel configuration
      babelrc: false,
      configFile: false,

      // The configuration for compilation
      presets: [
        ['@babel/preset-env', { useBuiltIns: 'usage' }],
        '@babel/preset-react',
        '@babel/preset-flow',
        "@babel/preset-typescript"
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread'
      ],
    },
  },
},