Judging based on your comment only, I have no way to determine where 61:11 is or what file it is. Is this the full error log?

I'm having a similar issue getting react-native-elements working in my typescript monorepo. It seems to be related to the webpack config but I just can't seem to get it all working together.

I've got a repo structure like:

MyProject/
  packages/
    components/
    mobile/
    web/

My typescript projects are setup with references, and the components project is using react-native-elements and I've added the webpack config described here https://react-native-elements.github.io/react-native-elements/docs/web_usage.html. Everything compiles and runs fine in react-native but in the web project i get:

/MyProject/node_modules/react-native-elements/src/avatar/Avatar.js
SyntaxError: /MyProject/node_modules/react-native-elements/src/avatar/Avatar.js: Unexpected token (71:4)

  69 | 
  70 |   const Utils = showEditButton && (
> 71 |     <TouchableHighlight
     |     ^
  72 |       style={StyleSheet.flatten([
  73 |         styles.editButton,
  74 |         {

It's choking on the jsx unfortunately. I compared all of the webpack config objects with the https://github.com/react-native-elements/create-react-app-example project but can't seem to overcome this error. Anyone have any ideas?

After a lot of reading / writing of config files I finally got this to work. It was an issue with the paths that I was resolving for the babel loader. Here is what I ended up with, which seems fairly general. I'll need to see if I can apply it to storybook as well.

// require.resolve will resolve to the entry point of the module
// but we just want the folder
function resolveModuleDir(moduleName) {
    const pattern = new RegExp(`(?<=${moduleName}).*$`);
    return require.resolve(moduleName).replace(pattern, "");
}

module.exports = {
    webpack: (config, env) => {
        const newConfig = override(
            removeModuleScopePlugin(),
            ...addBabelPlugins(
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ['@babel/plugin-proposal-class-properties', { "loose": true }],
                'babel-plugin-react-native-web'
            ),
            addWebpackPlugin(new webpack.DefinePlugin({ __DEV__: env !== 'production' })),
            babelInclude([
                resolveModuleDir('react-native-elements'),
                resolveModuleDir('react-native-vector-icons'),
                resolveModuleDir('react-native-ratings'),
                ...appIncludes
            ])
        )(config);
        return newConfig;
    }
}

@neilgamb I ended up getting my storybook working with react-native-elements. It was just a matter of getting the right modules transpiled by babel. The webpack.config.js in my .storybook folder looks like this:

module.exports = ({ config }) => {

  const oneOfRules = config.module.rules[3];
  const babelLoader = oneOfRules.oneOf[1];
  babelLoader.include = [
    ...babelLoader.include,
    'node_modules/react-native-elements',
    'node_modules/react-native-vector-icons',
    'node_modules/react-native-ratings'
  ]

 return config;
}

You may also want to confirm that you either have the babel-plugin-react-native-web plugin installed and configured or that you've added a webpack resolve alias for `react-native':'react-native-web'.

Hope that helps.

in case it might help someone I had to run into a few more steps.

• first: explicitly declare babel config in the webpack rule (vs in .babelrc) or else babel config was not applied for content in node_modules for reasons I ignore.
• second: add a file-loader because react-native-ratings imports files.

Example webpack rule config that works for me:

rules: [
    {
        test: /\.(js|jsx)$/,
        exclude: function(content) {
          return (
            /node_modules/.test(content) &&
            !/\/react-native-elements\//.test(content) &&
            !/\/react-native-vector-icons\//.test(content) &&
            !/\/react-native-ratings\//.test(content)
          );
        },
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    chrome: '70'
                  }
                }
              ],
              '@babel/preset-react'
            ],
            plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]]
          }
        }
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: 'file-loader'
        }
      }
]

wonderful! I'm coming back to this after working on something else for a few weeks. I will give this a shot a report back. Thanks for your input @cjam

Hi all, i still have problem, i hope somebody can give me some help or idea.

I created a react storybook (NO with react-create-app), then i add the library react-native-web, configured the storybook webpack and my babel, and everything works fine.

THEN i added the react-native-elements lib, i configured webpack follow the instructions found here and on the official docs, but i still have a error (ONLY WHEN I IMPORT A FILE USING 'react-native-component') like this :

Module parse failed: Unexpected token (18:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

image attached from storybook maybe is more clear

this is my babel config

module.exports = function(api) {
  api.cache(true)
  return {
    plugins: ['react-native-web'],
    presets: ['@babel/preset-react']
  }
}

and this is my webpack inside ./storybook

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

module.exports = async ({ config, mode }) => {
  config.module.rules.push(
    {
      test: /\.js$/,
      include: [
        path.resolve(__dirname, '../node_modules/react-native-elements/'),
        path.resolve(__dirname, '../node_modules/react-native-ratings/'),
        path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
        path.resolve(__dirname, '../'),
      ],
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: false,
          presets: ['module:metro-react-native-babel-preset'],
          plugins: [
            // needed to support async/await
            'babel-plugin-react-native-web',
            '@babel/plugin-transform-runtime',
            '@babel/plugin-proposal-class-properties'
          ]
        }
      }
    },
    // loader for png
    {
      test: /\.(gif|jpe?g|png|svg)$/,
      use: {
        loader: 'file-loader'
      }
    },
    // loader for font icons
    {
      test: /\.ttf$/,
      loader: 'url-loader',
      include: path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
    }
  );

  config.resolve.extensions = ['.web.js', '.js', '.json', '.web.jsx', '.jsx'];

  config.resolve.alias = {
    'react-native': 'react-native-web'
  };

  return config;
};

Any help will be very appreciated guys :)

I start from the official 2018 guide
Comprehensive Guide to create simple app using React Native Web and React Native Elements
and reach this error

The author proposed a solution in this commit
by modifying config/webpack.config.dev.js and config/webpack.config.prod.js

I just simply add react-native-ratings and it works

          // Process application JS with Babel.
          // The preset includes JSX, Flow, and some ESnext features.
          {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
             //include: paths.appSrc,
            include: [
              paths.appSrc,
              `${paths.appNodeModules}/react-native-elements`,
              `${paths.appNodeModules}/react-native-vector-icons`,
              `${paths.appNodeModules}/react-native-ratings`,
            ],

tnx @Aria461863631 , i re-check my config