Why is my web build failing with "Unexpected token" errors?

[ShivamS136]

Is your feature request related to a problem? Please describe.
I am new to node/npm, react and react-native so very new to react-native-web as well. It's been 3 days for me to integrate react-native-web in a Hello World App generated using npx react-native init as per the doc. I tried using both templates: with and without typescript, but no success so far. The farthest I got is to run the app code written in index.web.js but if I add any component from ./src/components/ then I get errors, mostly of webpack. If I list the articles I used to debug then this page will be short of space. I am literally frustrated and seems like convincing my organization to use react-native and react-native-web was not a good idea.

Describe a solution you'd like
It would be very helpful if we get a detailed doc mentioning the step-by-step guide to add react-native-web in a Hello Word app created by react-native init. Preferably with and without Typescript. The current doc is not that much helpful and descriptive. The steps are not that clear especially for a beginner like me.

Describe alternatives you've considered
I tried StackOverflow, logrocket, webpack doc, typescript doc, react-scripts, medium articles, current official doc of this project, babel doc, flow doc. But most of them are outdated or working till home file only, when I include components from src/components, it does not work.

---

I created a test repo for easy regeneration of error, So Steps to reproduce are as below:

1. Download this repo in your system.
2. npm install
3. npm run web

Now you'll see the error in the terminal.

Versions:

• metro-react-native-babel-preset: 0.66.0
• node: 16.3.0
• npm: 7.8.0
• OS: Windows 10 - 64 bit

[necolas]

You should use Expo as recommended, instead of trying to set up manually yourself. Manual setup requires basic knowledge of the relevant tools, and if you're a beginner it is too complicated to start there.

If you're having trouble you should also open a discussion or stackoverflow with specific errors and details so people can help. Just saying "it's not working" doesn't allow anyone to help you.

[ShivamS136]

Expo comes with a big overhead size app and has no Bluetooth support, that's why I don't want to use Expo. If the process mentioned in the doc is tested then it seems this is outdated due to webpack-5 I think. If that can be updated then it'll be good.

I tried to follow this article also to prepare the Hello World.

[necolas]

You can still eject Expo. I don't think there's much overhead anymore either

[ShivamS136]

I followed official documentation but with webpack@^4 and referred this article and somehow managed to reach the below situation:

• Webpage is getting rendered if my whole code is inside index.web.js.
• But when I import App inside this then I get compilation failed due to loader error.

Working index.web.js:

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class ReactNativeWeb extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#142a3d',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  },
});

AppRegistry.registerComponent('ReactNativeWeb', () => ReactNativeWeb);
AppRegistry.runApplication('ReactNativeWeb', {
  rootTag: document.getElementById('react-native-web-app'),
});

New Errorful index.web.js:

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.runApplication(appName, {
  rootTag: document.getElementById('react-native-web-app'),
});

src/components/App.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
// import {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Now I get the below errors, Seems related to webpack loaders associated with babel or flow:

ERROR in ./node_modules/react-native/Libraries/NewAppScreen/components/DebugInstructions.js 11:12
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> import type {Node} from 'react';
| import {Platform, StyleSheet, Text} from 'react-native';
| import React from 'react';
 @ ./node_modules/react-native/Libraries/NewAppScreen/index.js 17:0-63 20:0-27:2
 @ ./src/components/App.jsx
 @ ./index.web.js
 @ multi ./index.web.js

My all set up files are as below:

package.json

{
  "name": "awesomeproject2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "^17.0.2",
    "react-native": "0.64.2",
    "react-native-web": "^0.16.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.16.5",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "jest": {
    "preset": "react-native-web"
  }
}

web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /(\.js)|(\.jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
  ],
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      //   cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: [
        'module:metro-react-native-babel-preset',
        '@babel/preset-env',
        '@babel/preset-react',
      ],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web'],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.web.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  // ...the rest of your config

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js', '.jsx', '.web.jsx'],
  },
};

.bashrc

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "^react-native$": "react-native-web"
        }
      }
    ]
  ]
}

.flowconfig (Added part below [options] only)

# Alias the package name
module.name_mapper='^react-native$' -> 'react-native-web'

# Point flow to the 'module' field by default
module.system.node.main_field=module
module.system.node.main_field=main

babel.config.js

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-env',
    '@babel/preset-react',
  ],
};

[ShivamS136]

OK, I'll try to explore more on this lead. Thanks

[ShivamS136]

Tried including @babel/preset-flow separately as will but no improvement.

[necolas]

This line in the stack trace is telling you that you're trying to bundle RN internal code in your web bundle: node_modules/react-native/Libraries/NewAppScreen/index.js.

First, you should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config you pasted above, you need to explicitly list everything in node_modules that needs compiling.

[necolas]

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

All this code of the problem. You should not import from Libraries. This is not part of the public API. And you need to actually read the webpack code comments and follow the instructions when importing code from node_modules.

[ShivamS136]

Thank you so much @necolas
Finally, It's been resolved, my Hello World is done.
So I removed importing components from 'react-native/Libraries/NewAppScreen' and that's it. More detail is in this commit.

[ShivamS136]

Thank you so much @necolas
Finally, It's been resolved, my Hello World is done. Now I am going to enhance my knowledge about react-native and react-native-web and will be using this at Indiamart.

These 2 replies helped me to get the issue.

Reply 1 by @necolas
This line in the stack trace is telling you that you're trying to bundle RN internal code in your web bundle: node_modules/react-native/Libraries/NewAppScreen/index.js.

First, you should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config you pasted above, you need to explicitly list everything in node_modules that needs compiling.

Reply 2 by @necolas

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

All this code of the problem. You should not import from Libraries. This is not part of the public API. And you need to actually read the webpack code comments and follow the instructions when importing code from node_modules.

So I removed importing components from 'react-native/Libraries/NewAppScreen' and that's it. More detail is in this commit.

[ShivamS136]

@necolas
I wrote an article/guideline to add web support in a react-native app from scratch using react-native-cli. If you find this correct and helpful for beginners then I would like to add this in React Native for Web's official documentation. I can add customized article or a link to the existing article under "Multi Platform Setup"section, whatever you say.
Please let me know if it's OK and feasible to do so. I would be extremely happy to contribute this magnificent repo.

[dalcib]

@ShivamS136, you can try esbuild.
It is so much simpler and faster than babel/webpack.

To bundle and serve your repo you need only these commands:

$ npm i esbuild

$ echo "{\"compilerOptions\": {\"baseUrl\": \".\", \"paths\": {\"react-native\": [\"node_modules/react-native-web\"]}}}" > jsconfig.json

$ esbuild --bundle index.web.js --outfile=bundle.web.js --resolve-extensions=.web.jsx,.web.js,.jsx,.js

$ esbuild --servedir=.

You can read about more complex scenarios here

[ajblog]

Thank you so much @necolas
Finally, It's been resolved, my Hello World is done. Now I am going to enhance my knowledge about react-native and react-native-web and will be using this at Indiamart.

These 2 replies helped me to get the issue.

Reply 1 by @necolas
This line in the stack trace is telling you that you're trying to bundle RN internal code in your web bundle: node_modules/react-native/Libraries/NewAppScreen/index.js.
First, you should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config you pasted above, you need to explicitly list everything in node_modules that needs compiling.

Reply 2 by @necolas

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

All this code of the problem. You should not import from Libraries. This is not part of the public API. And you need to actually read the webpack code comments and follow the instructions when importing code from node_modules.

So I removed importing components from 'react-native/Libraries/NewAppScreen' and that's it. More detail is in this commit.

Hello there, I'm somewhat new to react-native
We have ejected Expo from our project before, and now We want to use react-native-web to get an output on the browser.
I've read your article and followed each step and I get the same error that you have mentioned at the step 10.
but the problem is that I haven't used any imports from 'react-native/libraries' myself.
There are some third-party packages that have been used in the project and they are causing this problem. Cause they use imports from 'react-native/libraries' themselves.
Now I'm wondering is there another way to get rid of this error without changing the packages I use? or the only way is to try and find new packages who aren't using import from 'react-native/libraries'

[ShivamS136]

@ajblog I am not very sure but I think you should use only the packages which are web compatible. You can use this directory website to find out.

[rdewolff]

Maybe u can help me with a very similar issue am having here #2339 ?

[mikehardy]

Just wanted to post up this template in case others were looking (as I was) for a template that gets you going with react-native-web: https://github.com/criszz77/luna -- npx react-native init AwesomeProject --template criszz77/luna

It may be a bit heavy to describe as "bare-bones", but in my experience you will need navigation and typescript is worth it, so it includes those two things out of the box.

https://github.com/invertase/react-native-firebase-authentication-example/ is a more complicated example template that builds on the luna template above by demonstrating how to use Firebase (firebase-js-sdk on the web via shims - a neat web trick!, and react-native-firebase for native - bound to firebase-ios-sdk/firebase-android-sdk) - npx react-native init AwesomeProject --template invertase/react-native-firebase-authentication-example (as directed in the README). Does multi-platform auth flows out of the box.

Expo obviously works too, but there are some non-expo options for works-out-of-the-box init.