React-native-webview example not working

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

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

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 :thinking:
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.

Sorry, here is the link:


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

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)

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.

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