React-native-webview example not working

constantintaivan · August 1, 2020, 9:06pm

Hello

My goal is to develop a simple react native app with a webview running a web app.
I’m trying to get a basic webview example running by using react-native-webview package.
After removing all dependencies errors I get one more error, added below.
I’ve been researching and might be some compatibility issues between package versions. Tested with latest nodejs v14.7.0 with same error.

Example used:
https://snack.expo.io/@wodin/webview-example

npm -list --depth=0
±- babel-preset-expo@7.1.0
±- expo@35.0.1
±- react@16.8.6
±- react-dom@16.8.3
±- react-native@0.60.6
±- react-native-paper@4.0.1
±- react-native-vector-icons@7.0.0
±- react-native-web@0.11.7
`-- react-native-webview@7.0.5

expo start
Starting project at …
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser… (press shift-d to disable)
error Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class.

SyntaxError: Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class
at new RegExp ()
at blacklist (D:\Dev\ReactNative\webview-example2\node_modules\metro-config\src\defaults\blacklist.js:34:10)
at getBlacklistRE (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:69:59)
at getDefaultConfig (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:84:20)
at load (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:112:25)
at Object.runServer [as func] (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\runServer.js:82:58)
at Command.handleAction (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\cliEntry.js:160:21)
at Command.listener (D:\Dev\ReactNative\webview-example2\node_modules\commander\index.js:315:8)
at Command.emit (events.js:315:20)
at Command.parseArgs (D:\Dev\ReactNative\webview-example2\node_modules\commander\index.js:651:12)
Metro Bundler process exited with code 1
Error: Metro Bundler process exited with code 1
at ChildProcess. (C:@expo\xdl@57.9.26\src\Project.ts:1854:16)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)

expo diagnostics

Expo CLI 3.23.1 environment info:
System:
OS: Windows 10 10.0.18362
Binaries:
Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ^35.0.0 => 35.0.1
react: ^16.8.6 => 16.8.6
react-dom: 16.8.3 => 16.8.3
react-native: ^0.60.6 => 0.60.6
react-native-web: ^0.11.7 => 0.11.7

adamjnav · August 2, 2020, 11:05pm

Hey @constantintaivan,

It seems the example you linked to no longer exists. Can you create a new, up-to-date Snack that reproduces this error that we can test on our end?

Cheers,
Adam

wodin · August 2, 2020, 11:26pm

Hi Adam

The snack does exist and when I clicked on the link earlier today in Firefox on my phone it worked. When I tried it now from a desktop browser it did not
I noticed that the desktop browser was trying to load the URL using %40wodin instead of @wodin. I don’t really see why that should make a difference, but it seems to. If you change it to @wodin the link works. But it’s trivial. App.js just contains the following code:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'https://github.com/expo/expo' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}

The snack was using SDK 35, so I updated it to SDK 38 and saved it again. I could load it in the Expo app without problems.

I think @constantintaivan’s issue is nothing to do with the code and rather some weird issue related to Windows and/or nodejs. I know I’ve seen issues with “invalid regular expressions” and certain versions of node on Windows before.

@constantintaivan, have you tried with node 12.x as a test? Even if that works, if I were you I’d install WSL2 (assuming you’re using Windows 10) and then install node and expo-cli etc. inside Ubuntu running on WSL2.

constantintaivan · August 3, 2020, 11:01am

Sorry, here is the link:

I think it’s a good example to start reproducing the issue.

constantintaivan · August 3, 2020, 1:51pm

Hi Michael,

Thanks for feedback. Still didn’t manage to run that… No success for Node 12
I’ve updated Windows to version 2004, Build 19041. I also enabled WSL2
Reinstalled node v12.18.3 and exo-cli 3.23.1
Perhaps I need to try with Ubuntu on Windows.
Same error below

D:\Dev\ReactNative\webview-example2>expo start
Starting project at D:\Dev\ReactNative\webview-example2
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser… (press shift-d to disable)
error Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class.

SyntaxError: Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class
at new RegExp ()
at blacklist (D:\Dev\ReactNative\webview-example2\node_modules\metro-config\src\defaults\blacklist.js:34:10)
at getBlacklistRE (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:69:59)
at getDefaultConfig (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:84:20)
at load (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\tools\loadMetroConfig.js:112:25)
at Object.runServer [as func] (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\commands\server\runServer.js:82:58)
at Command.handleAction (D:\Dev\ReactNative\webview-example2\node_modules\react-native\node_modules@react-native-community\cli\build\cliEntry.js:160:21)
at Command.listener (D:\Dev\ReactNative\webview-example2\node_modules\commander\index.js:315:8)
at Command.emit (events.js:315:20)
at Command.parseArgs (D:\Dev\ReactNative\webview-example2\node_modules\commander\index.js:651:12)
Metro Bundler process exited with code 1
Error: Metro Bundler process exited with code 1
at ChildProcess. (C:@expo\xdl@57.9.26\src\Project.ts:1854:16)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)

wodin · August 3, 2020, 4:16pm

I don’t know what’s causing the problem, but I am pretty sure that installing Ubuntu on WSL2 and then installing node and expo within Ubuntu and running it from there should work.

system · August 23, 2020, 4:16pm

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
I don't use 'npm start' or 'expo start' on windows 10, my version of expo is 3.5.0 Expo Development Tools	2	1443	December 30, 2019
react-native-webview not working with SDK 47 Android Build Expo SDK webview	3	261	February 10, 2023
Android Expo app problem workaround-ed Expo SDK	1	386	September 30, 2021
Webview is not loading uri, showing only white page Expo SDK	4	10080	November 3, 2019
Why is this Web View not loading in Snack for React Native Expo Development Tools	2	1528	October 25, 2020

React-native-webview example not working

Related Topics