App fails to compile with react-native-web

[binyamin]

I'm trying to use react-native-paper in conjunction with react-native-web. React-native-web is an npm package which aliases react-native, and allows you to run react-native apps in the browser (ie: no simulator). It renders components as android, and it uses react-native v0.55.

Current behaviour

When I run the app without using react-native-paper, it runs fine. When I use react-native-paper however, I currently get an error message (see below) and the app fails to compile.

Expected behaviour

I expect for the app to run as a react-native-web app, with* react-native-paper* providing components.
Below is the error message I receive when I run npm start.

Failed to compile
./node_modules/react-native-paper/src/index.js
SyntaxError: /media/binyamin/Seagate Expansion Drive/Documents/Coding/react-native/my-web-app/node_modules/react-native-paper/src/index.js: Unexpected token (4:12)

  2 | 
  3 | import * as Colors from './styles/colors';
> 4 | import type { Theme as _Theme } from './types';
    |             ^
  5 | 
  6 | export type Theme = _Theme;
  7 | 

Code sample

Github Repo: https://github.com/b3u/my-web-app
Just run npm start to reproduce the issue

Screenshots (if applicable)

What have you tried

1. Search Google
2. Search existing issues
3. Create a custom theme
4. Opt out of using icons
5. Downgrade to v2.1.3

Your Environment

software	version
ios or android	n/a (the web app displays as android)
react-native	react-native-web v0.9.8
react-native-paper	v2.2.8
node	v10.13
npm or yarn	npm v6.4.1

[satya164]

@b3u you need to configure babel-loader to transpile node_modules or react-native-paper and use the flow preset:

{
  test: /\.js$/,
  exclude: /node_modules/,
  include: [path.resolve(__dirname, "node_modules/react-native-paper")],
  use: {
    loader: 'babel-loader'
  }
}

[binyamin]

@satya164 So I copy and paste this into my .babelrc?
PS: I've never used babel before

[satya164]

@b3u this is for webpack.

Also can you paste your babelrc?

[binyamin]

{
  "plugins": [
    "optional-require"
  ],
  "presets": ["@babel/preset-flow"]
}

[satya164]

@b3u your babel config looks good. it should work fine after you configure webpack like I pasted above.

[binyamin]

okay, thanks

[binyamin]

@satya164 Same error again.
Here's my webpack.config.js:

module: {
  rules: [
    {
	  test: /\.js$/,
	  exclude: /node_modules/,
	  include: [path.resolve(__dirname, "node_modules/react-native-paper")],
	  use: {
	    loader: 'babel-loader'
	  }
	}
  ]
}

[satya164]

Can you try this:

{
  test: /\.js$/,
  exclude: /node_modules(?!\/react-native-paper)/,
  use: {
    loader: 'babel-loader'
  }
}

[binyamin]

Same error.

const path = require('path');

module.exports = {
  module: {
	rules: [
    {
  		test: /\.js$/,
 		exclude: /node_modules(?!\/react-native-paper)/,
 		use: {
    	loader: 'babel-loader'
  		}
	}
  	]
  }
}

[satya164]

do you have a link to a GitHub project I can try?

[binyamin]

https://github.com/b3u/my-web-app

[satya164]

@b3u seems you use create-react-app. Unfortunately, CRA doesn't allow you to customize the webpack or babel configs. You might want to use Webpack directly.

[binyamin]

Thanks for your time. So what would I be doing differently? I have not used either webpack or babel before, so I'm not really sure what you mean.

[satya164]

Maybe this can help: https://www.valentinog.com/blog/react-webpack-babel/

Check the first 2 parts (setting up webpack and setting up babel)