React-native-paper: 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)

[binyamin]

Will do

[binyamin]

I get the following error:

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/media/binyamin/Seagate Expansion Drive/Documents/Coding/react-native/my-web-app/public'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch (fs.js:1251:11)
    at createFsWatchInstance (/media/binyamin/Seagate Expansion Drive/Documents/Coding/react-native/my-web-app/node_modules/chokidar/lib/nodefs-handler.js:37:15)
...

• I have run killall node and sudo killall node, but the terminal says there's no proccess running.
• I have installed webpack v4.19.1 as required by CRA, and installed babel as well.
• I've pushed all changes to the repo

[satya164]

@b3u seems to be issue on your system. Try restarting it. Also check https://unix.stackexchange.com/questions/13751/kernel-inotify-watch-limit-reached

[binyamin]

@satya164 Still having issues. I now get the original error message when running npm start. It may be how I set up webpack or babel. If you don't mind, can you please fork my repo, set up babel and webpack, and post the link? I think that'll help me alot.

[binyamin]

When I run npm run build, I get the following error:

ERROR in ./src/index.js 30:4
Module parse failed: Unexpected token (30:4)
You may need an appropriate loader to handle this file type.
| export default function Main() {
|   return (
>     <PaperProvider theme={theme}>
|       <App />
|     </PaperProvider>

[binyamin]

I recreated the error without Create React App here. I followed the steps in the blog listed above, integrated react-native, and the app broke when I integrated react-native-paper. Many people who had the same error seemed to have typos in their webpack.config.js file, but I don't know what's missing.

[satya164]

@b3u Here is a pr with the build fixed: https://github.com/b3u/my-app-3/pull/1

There's another issue with build due to the following in index.html: <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">. Commenting it out makes the build pass.

[binyamin]

thanks. I'll try it.

[binyamin]

Thank you so much. What did it?

[binyamin]

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

[satya164]

What did you change? I tried npm start and npm run build

You can see it in the PR diff. It's working for me. Maybe you're not on the correct branch?

What did it?

It's primarily changing .babelrc to babel.config.js as Babel 7 doesn't transpile node_modules with .babelrc. I also added url-loader and tweaked webpack config so it can load the files properly.

[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.

[binyamin]

Thank you so much for your help. I was ready to give up.

[littlehome-eugene]

I still have the same problem.
(I get the following error as soon as I do import { RadioButton, Text, Button } from 'react-native-paper' , and error disappears if I remove that line)

2 |
3 | import * as Colors from './styles/colors';

4 | import type { Theme as _Theme } from './types';
| ^
5 |
6 | export type Theme = _Theme;
7 |

my babel.config.js

 module.exports = {
   "presets": [

     "@babel/preset-env",
     "@babel/preset-react"
   ],
   "plugins": [
     "@babel/transform-runtime",
     [
       "@babel/plugin-proposal-decorators",
       {
         "legacy": true
       }
     ],
     "@babel/plugin-proposal-function-sent",
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-proposal-numeric-separator",
     "@babel/plugin-proposal-throw-expressions",
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-import-meta",
     [
       "@babel/plugin-proposal-class-properties",
       {
         "loose": false
       }
     ],
     "@babel/plugin-proposal-json-strings"
   ]
 }

and my webpack.config.js (v2)

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

[satya164]

@littlehome-eugene you need @babel/preset-flow

[littlehome-eugene]

Thanks for the lightening quick response

As soon as I added that in, I get different errors

ERROR in ./native-apps/sns-review/~/react-native-paper/src/components/ProgressBar/ProgressBar.js
Module not found: Error: Can't resolve './ProgressBarComponent' in '/home/eugenekim/Documents/zibann-reservation/momsite/native-apps/sns-review/node_modules/react-native-paper/src/components/ProgressBar'
 @ ./native-apps/sns-review/~/react-native-paper/src/components/ProgressBar/ProgressBar.js 9:0-58
 @ ./native-apps/sns-review/~/react-native-paper/src/index.js
 @ ./momsite/static/external_review/react/components/advertiser/product/create/step1.js
 @ ./momsite/static/external_review/react/components/advertiser/product/create/index.js
 @ ./momsite/static/external_review/react/components/advertiser/product/index.js
 @ ./momsite/static/external_review/react/components/advertiser/index.js
 @ ./momsite/static/external_review/react/components/advertiser/entry/advertiser.js
 @ ./momsite/static/native-apps/sns-review/index.js

ERROR in ./native-apps/sns-review/~/react-native-vector-icons/lib/create-icon-set.js
Module parse failed: /home/eugenekim/Documents/zibann-reservation/momsite/native-apps/sns-review/node_modules/react-native-vector-icons/lib/create-icon-set.js Unexpected token (43:21)
You may need an appropriate loader to handle this file type.
|
|   class Icon extends PureComponent {
|     static propTypes = {
|       allowFontScaling: PropTypes.bool,
|       name: IconNamePropType,
 @ ./native-apps/sns-review/~/react-native-vector-icons/MaterialIcons.js 6:0-50
 @ ./native-apps/sns-review/~/react-native-paper/src/components/Icon.js
 @ ./native-apps/sns-review/~/react-native-paper/src/components/BottomNavigation.js
 @ ./native-apps/sns-review/~/react-native-paper/src/index.js
 @ ./momsite/static/external_review/react/components/advertiser/product/create/step1.js
 @ ./momsite/static/external_review/react/components/advertiser/product/create/index.js
 @ ./momsite/static/external_review/react/components/advertiser/product/index.js
 @ ./momsite/static/external_review/react/components/advertiser/index.js
 @ ./momsite/static/external_review/react/components/advertiser/entry/advertiser.js
 @ ./momsite/static/native-apps/sns-review/index.js

[satya164]

@littlehome-eugene check @b3u's config

[littlehome-eugene]

I hadd to add the following line

extensions: [".web.js", ".js"]

I also found something different with this line

/node_modules(?!\/react-native-paper|react-native-vector-icons)

Although it doesn't work, I think the regex is bit off maybe. (I put exclude: /node_modules(?!\/react-native-vector-icons)/, separately and it worked..)

so it must be exclude: /node_modules(?!\/react-native-paper|\/react-native-vector-icons)/,

[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'],
      },
    },
  };
};

[robbiemu]

I can describe how to get react-native-paper working in expo.

1. expo init --yarn --template blank demo-app

-- cd demo-app

1. yarn add react-native-web react-router-dom react-router-native react-app-polyfill react-art react-native-paper react-dom

-- yarn add -D react-scripts @babel/preset-flow @babel/plugin-proposal-class-properties

1. code package.json and add scripts:

   "web": "react-scripts start",
   "build-web": "react-scripts build"

-- we're going to be cheating and editing them in-place. A better practice is to copy node-modules/react-scripts/ config and scripts into your project folder, install their dependencies and get them working locally. But this is just a proof-of-concept (so .. just be sure not to reinstall node_modules or react-scripts for now on)

-- configure/add main:

"main": "react-native-main.js",

1. code react-native-main.js saving:

import { KeepAwake, registerRootComponent } from 'expo'
import App from './src/App'

if (__DEV__) {
  KeepAwake.activate()
}

registerRootComponent(App)

1. mkdir src public

2. rm App.js

-- code src/App.js saving:

import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Provider as PaperProvider } from 'react-native-paper'
import { Router, Switch, Route } from './routing'

import Home from './Controllers/Home'

export default class App extends React.Component {
  render () {
    return (
      <PaperProvider>
        <View style={styles.app}>
          <Router>
            <Route exact path="/" render={props => <Home {...props} />} />
          </Router>
        </View>
      </PaperProvider>
    )
  }
}

const styles = StyleSheet.create({
  app: {
    flex:1
  }
})

1. mkdir src/Controllers && code src/Controllers/Home.js saving: (need to make something to demo Paper .. this is essentially just the text example from the examples folder)

/* @flow */

import React from 'react'
import { View, StyleSheet, Platform } from 'react-native'
import {
  Caption,
  Headline,
  Paragraph,
  Subheading,
  Title,
  withTheme,
  type Theme,
} from 'react-native-paper'

type Props = {
  theme: Theme,
};

class TextExample extends React.Component<Props> {
  render() {
    const {
      theme: {
        colors: { background },
      },
    } = this.props
    return (
      <View style={[styles.container, { backgroundColor: background }]}>
        <Caption style={styles.text}>Home</Caption>
        <Paragraph style={styles.text}>This is the home component</Paragraph>
        <Subheading style={styles.text}>home component</Subheading>
        <Title style={styles.text}>Home</Title>
        <Headline style={styles.text}>Home on { Platform.OS }</Headline>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    padding: 16,
    flex: 1,
  },
  text: {
    marginVertical: 4,
  },
})

export default withTheme(TextExample)

1. code public/index.html saving:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Third Party Demo</title>
</head>
<body>
    <div id="react-native-web-app"></div>
</body>
</html>

1. code src/index.js saving:

import React from 'react'
import ReactDom from 'react-dom'

import App from './App'

ReactDom.render(<App />, document.getElementById('react-native-web-app'))

1. code src/routing.native.js saving:

export { NativeRouter as Router, Switch, Route, Link } from 'react-router-native'

-- code src/routing.web.js saving:

export { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

1. at this point, yarn iosshould work but yarn web gives the error reported here. We need to edit the react-scripts Webpack config node_modules/react-scripts/config/webpack.config.js:

-- to the _plugins_ of the section marked:

            // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.

(at about line 387) add this plugin:

                  [
                    "@babel/plugin-proposal-class-properties",
                    {
                      "loose": false
                    }
                  ]

after that section, create a new section:

            // Process paper specially
            {
              test: /\.js$/,
              exclude: /node_modules(?!\/react-native-paper|\/react-native-vector-icons)/,
              use: {
                loader: require.resolve('babel-loader'),
                options: {
                  babelrc: false,
                  configFile: false,
                  compact: false,
                  presets: [
                    '@babel/preset-env',
                    '@babel/preset-react',                
                    '@babel/preset-flow',
                  ],
                  cacheDirectory: true,
                  plugins: [     
                    [
                      "@babel/plugin-proposal-class-properties",
                      {
                        "loose": false
                      }
                    ],
                  ],
                  // Don't waste time on Gzipping the cache
                  cacheCompression: false,

                  // If an error happens in a package, it's possible to be
                  // because it was compiled. Thus, we don't want the browser
                  // debugger to show the original code. Instead, the code
                  // being evaluated would be much more helpful.
                  sourceMaps: false,
                },
              }
            },

[satya164]

https://github.com/callstack/react-native-paper/pull/770

[binyamin]

Thanks guys. My project is done now, but I appreciate the help.

[hadarbmdev]

Issue still happening, im using create-react-app-native and can't edit webpack.config files without running 'eject'.
Any ideas how to fix this without eject?

[satya164]

CRA is very limited. We can't help because it doesn't allow us to change literally anything. You'll face more issues down the road when using it with other react native libraries if you don't want to eject.

We have written a guide on our docs on how to setup rn web vanilla webpack projects: https://callstack.github.io/react-native-paper/using-on-the-web.html

Please open an issue if there are issues/mistakes in our guide.

[robbiemu]

@Hadarbmdev nothing official yet (I think), no. It so happens that I don’t eject. I make the change in place in node_modules by copying the webpack config to the root directory and adding a postinstall to copy that back.

[raphox]

If you are using https://facebook.github.io/create-react-app. You can use https://github.com/timarney/react-app-rewired to config webpack without react-scripts eject.

• Install packages as describe here https://callstack.github.io/react-native-paper/using-on-the-web.html#2-configure-babel-loader :
  $ yarn add --dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
• Install react-app-rewired
  $ yarn add --dev react-app-rewired
• Create a config file on root of CRA project:

// config-overrides.js
module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.js$/,
        exclude: /node_modules[/\\](?!react-native-paper|react-native-vector-icons|react-native-safe-area-view)/,
        use: {
          loader: "babel-loader",
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,

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

    return config;
  }

• Change your package.json as describe her https://github.com/timarney/react-app-rewired#3-flip-the-existing-calls-to-react-scripts-in-npm-scripts

And try run your application.

[belizar]

is this issue still open ? I have the same initial problem

[cavishek39]

when i try to run the app this error occured...pls help???
[Tue Sep 22 2020 20:22:40.656] BUNDLE ./index.android.js

error: Error: D:\OLD PROJ\c_ko-learner-masternode_modulesreact-native-paper\src\styles\DefaultTheme.tsx: Unexpected token (4:12)

2 | import { black, white, pinkA400 } from './colors';
3 | import configureFonts from './fonts';

4 | import type { Theme } from '../types';
| ^
5 |
6 | const DefaultTheme: Theme = {
7 | dark: false,

[binyamin]

@cavishek39 Personally, I can't help you. Imo, you are more likely to get help if you open a new issue.

[amjad786786]

Hi, Please

do this

npm install @babel/core@^7.9.0
npm install @babel/runtime@^7.9.2
npm install typescript@^3.8.3
rm -rf node_modules
npm install
Uninstall app in emulator/phone.
npm start -- --reset-cache