Error while adding react native elements to react native

Question

I have react native with react native web project and I want to use react native elements but I got error when adding react native elements to project.

./node_modules/react-native-elements/src/avatar/Avatar.js
SyntaxError: /home/hamidreza/Desktop/reactElement/node_modules/react-native-elements/src/avatar/Avatar.js: Unexpected token (72:4)

  70 | 
  71 |   const Utils = showAccessory && (
> 72 |     <TouchableHighlight
     |     ^
  73 |       style={StyleSheet.flatten([
  74 |         styles.accessory,
  75 |         {

My web/webpack.config.js:

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');
const babelLoaderConfiguration = {
  test: /\.js$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native-elements'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['react-native'],
      plugins: ['react-native-web'],
    },
  },
};

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

module.exports = {
  entry: [path.resolve(appDirectory, 'index.web.js')],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },
  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.js'],
  },
};

My package.json:

{
  "name": "ReactNativeWebApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "web": "react-scripts start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.5.1",
    "@react-navigation/stack": "^5.4.2",
    "react": "16.11.0",
    "react-dom": "^16.13.1",
    "react-native": "0.62.2",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.12.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-scripts": "^3.4.1",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

How can I solve this problem?

Answer 1

Since "native" packages don't include compiled code (es5 after babel and jsx transformation), to use them in web you must add the libraries to the webpack config.

So I have to add path.resolve(paths.appNodeModules, 'react-native-elements'), and path.resolve(paths.appNodeModules, 'react-native-rating'), to webpack, and this solve the problem.

reference link