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

Question

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

然后，我按照这里的说明，将react原生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的属性"bindings"位于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/viewers.js:1193:21)在NodePath_call(/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverage/lib/path/context.js:53:20)在NodePath.call(/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverage/lib/path/context.js:40:17)在NodePath.visit(/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverage/lib/path/context.js:88:12)在TraversalContext.visitQueue(/Users/aliyar/ReactNativeWeb/node_modules/@babel/tracetrave/lib/context.js:1118:16)在TraversalContext.visitSingle(/Users/aliyar/ReactNativeWeb/node_modules/@babel/tracetrave/lib/context.js:90:19)@多(webpack)-dev服务器/客户端？http://localhost:8080(webpack)/hot/dev-server.js./index.web.js main[2]

知道我为什么会出错吗？

Answer 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"
}
}

我希望这能有所帮助。