App fails to compile with react-native-web

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]

Also, do you think you can reference this issue on the readme so that others can get helped from it?

We’re planning to publish already transpiled code to NPM so the babel stuff won’t be necessary, but yea, we’ll add a guide to use with react-native-web soon.

[wendlericasei]

@satya164 Hi!

I got the same error as @b3u, but in my case I used expo to create my base app to use react-native-web.

Is there any specific configuration to webpack from expo?

here is my babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};