将 react-native-web 添加到现有的 react-native 应用程序时出错

Posted 2023-02-23

【中文标题】将 react-native-web 添加到现有的 react-native 应用程序时出错

【英文标题】：Error when adding react-native-web to an existing react-native app

【发布时间】：2019-06-18 14:43:37

【问题描述】：

我通过 react-native init ReactNativeWeb 创建了一个 react-native 应用程序。

然后，我按照说明here，将 react-native-web 添加到其中。

我还在我的应用程序的根文件夹下添加了一个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>
        <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")
);

这是我的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$/,
  // 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"]
  
;

还有，这是我在 .bablerc 文件中的内容：

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

但是，当我尝试使用以下命令运行它时，我收到以下错误。

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

错误：

./index.web.js 中的错误 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： TypeError：无法读取 null 的属性“绑定” 在 Scope.moveBindingTo (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/scope/index.js:867:13) 在 BlockScoping.updateScopeInfo (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17) 在 BlockScoping.run (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12) 在 PluginPass.BlockStatementSwitchStatementProgram (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24) 在 newFn (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/visitors.js:193:21) 在 NodePath._call (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:53:20) 在 NodePath.call (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:40:17) 在 NodePath.visit (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:88:12) 在 TraversalContext.visitQueue (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:118:16) 在 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]

知道为什么会出现错误吗？

【参考方案1】：

我能够通过将babel-preset-react-native 升级到版本 5.0.2 来解决您的问题。其他一切都应该与您的设置相同。

这是我完整的package.json：

  "name": "ReactNativeWeb02",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "build": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors"
  ,
  "dependencies": 
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native": "0.58.0",
    "react-native-web": "^0.10.0-alpha.3"
  ,
  "devDependencies": 
    "babel-plugin-react-native-web": "^0.9.13",
    "babel-preset-react-native": "^5.0.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.5",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  ,
  "jest": 
    "preset": "react-native"
  

我希望这会有所帮助。

【讨论】：

@Hi Цветан Иванов，我按照相同的说明进行操作，使用 yarn build 命令编译成功。但是应用程序没有在浏览器中启动，我什至在浏览器中打开了 localhost:8080 url。你能帮帮我吗？

@ataravati 你也是这样吗？

@srikanth 不，据我所知。我不再使用那个应用了。