React-native-web: Error when adding react-native-web to an existing react-native app

[ataravati]

I created a react-native app, by doing react-native init ReactNativeWeb.

Then, I followed the instructions here, to add react-native-web to it.

I also added an index.web.js file under the root folder of my app. Here's what the file looks like:

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>
        <Text style={styles.instructions}>
          To get started, edit index.web.js
        </Text>
        <Text style={styles.instructions}>Press Cmd+R to reload</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

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

Here's my webpack.config.js file:

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$/,
  // 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")
  ],
  use: {
    loader: "babel-loader",
    options: {
      cacheDirectory: true,
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ["react-native"],
      // 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]"
    }
  }
};

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"]
  }
};

And, here's what I have in the .bablerc file:

{
  "presets": ["@babel/preset-env"]
}

But, when I try to run this with the following command, I get the error below.

./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.con

Error:

ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/scope/index.js:867:13)
at BlockScoping.updateScopeInfo (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:90:19)
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./index.web.js main[2]

[necolas]

Something is wrong with your babel/webpack setup. Maybe it's trying to load node_modules/react-native-uncompiled and that path doesn't exist. Not enough to say anything else.

[ataravati]

@necolas I got the webpack config from the instructions. Shouldn't following the instructions be enough for this to work?

[necolas]

As is mentioned:

What follows is merely an example of one basic way to package a web app…

You still have to configure webpack yourself to compile the relevant files. I have no idea which version of all the package's you're using either. So it's best to refer to the webpack documentation and Google your compiler errors.

[ataravati]

OK, thanks!

[infaz]

Were you able fix this issue ?

[CuiBenyong]

same issue, and how to fix it

[talaikis]

Just add

presets: [
        'module:metro-react-native-babel-preset',
        '@babel/preset-env'
      ],

Because documentation is several years behind.

[srikanthsunkari]

Hi @talaikis I am able to build the project successfully but I don't see the dist/bundle.web.js are created. Neither browser got launched any help would be appreciated.

[ngocphucstyle]

hi every one , the first i was using package react-native-web and then i was using Hooks in my project .
if i run on mobile environment ,its working , but when i run project on web ,its error
Error "React Hook "useDispatch" is called in function "index" which is neither a React function component or a custom React Hook function"
package json:
{ "name": "neweasybuildapp", "version": "0.1.0", "private": true, "scripts": { "web": "node scripts/start.js", "test:web": "node scripts/test.js", "build": "node scripts/build.js", "start": "react-native start", "start-clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm start -- --reset-cache", "test": "npm run test:web && npm run test:native", "android": "react-native run-android", "ios": "react-native run-ios", "test:native": "node_modules/.bin/jest -c ./config/jest/jest.config.native.js", "lint": "eslint src/ --ext .js,.jsx || true", "fix": "eslint --fix src/ --ext .js,.jsx || true" }, "dependencies": { "@babel/core": "7.8.4", "@babel/plugin-proposal-class-properties": "^7.10.4", "@react-native-community/masked-view": "^0.1.10", "@react-navigation/web": "^1.0.0-alpha.9", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^2.10.0", "add": "^2.0.6", "axios": "^0.19.2", "babel-jest": "^24.9.0", "babel-loader": "8.0.6", "babel-plugin-named-asset-import": "^0.3.6", "babel-preset-react-app": "^9.1.1", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "eslint-config-react-app": "^5.2.0", "eslint-loader": "3.0.3", "eslint-plugin-flowtype": "4.6.0", "file-loader": "4.3.0", "fs-extra": "^8.1.0", "global": "^4.4.0", "html-webpack-plugin": "4.0.0-beta.11", "identity-obj-proxy": "3.0.0", "immer": "^7.0.5", "jest": "24.9.0", "jest-environment-jsdom-fourteen": "1.0.1", "jest-resolve": "24.9.0", "jest-watch-typeahead": "0.4.2", "mini-css-extract-plugin": "0.9.0", "optimize-css-assets-webpack-plugin": "5.0.3", "pnp-webpack-plugin": "1.6.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "4.0.1", "prop-types": "^15.7.2", "react": "^16.13.1", "react-app-polyfill": "^1.0.6", "react-dev-utils": "^10.2.0", "react-dom": "^16.13.1", "react-native": "0.61.5", "react-native-gesture-handler": "^1.6.1", "react-native-reanimated": "^1.9.0", "react-native-safe-area-context": "^3.0.7", "react-native-screens": "^1.0.0-alpha.23", "react-native-tab-view": "^2.14.4", "react-native-web": "^0.12.2", "react-navigation": "^4.4.0", "react-navigation-stack": "^2.8.2", "react-navigation-tabs": "^2.9.0", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-saga": "^1.1.3", "resolve": "1.15.0", "resolve-url-loader": "3.1.1", "sass-loader": "8.0.2", "semver": "6.3.0", "style-loader": "0.23.1", "terser-webpack-plugin": "2.3.4", "ts-pnp": "1.1.5", "url-loader": "2.3.0", "webpack": "4.41.5", "webpack-dev-server": "3.10.2", "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "4.3.1" }, "devDependencies": { "@babel/plugin-transform-flow-strip-types": "^7.10.4", "@babel/runtime": "^7.6.2", "@react-native-community/eslint-config": "^0.0.5", "babel-eslint": "^10.0.3", "babel-plugin-module-resolver": "^4.0.0", "eslint": "^6.8.0", "eslint-config-airbnb": "^18.2.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.18.0", "eslint-plugin-react-hooks": "^1.7.0", "metro-react-native-babel-preset": "^0.58.0", "react-test-renderer": "16.9.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "eslintConfig": { "extends": "react-app" }, "jest": { "preset": "react-native-web", "roots": [ "<rootDir>/src" ], "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts" ], "setupFiles": [ "react-app-polyfill/jsdom" ], "setupFilesAfterEnv": [ "<rootDir>/src/setupTests.js" ], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jest-environment-jsdom-fourteen", "transform": { "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$" ], "modulePaths": [], "moduleNameMapper": { "^react-native$": "react-native-web", "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node" ], "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ] } }

code in my project
import React, {useState} from 'react'; import {Text, View} from 'react-native'; const index = () => { const [test,setTest] = useState('Phuc'); return ( <View> <Text>Ngoc {test}</Text> </View> ); }; export default index;

i come from Viet Nam, i hope every one will support me thanks