我创建了一个 react-native 应用程序，通过react-native init ReactNativeWeb.
然后，我按照此处的说明添加 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：无法在 Scope.moveBindingTo 处读取 null 的属性“绑定”（/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-服务器/客户端？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?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]
知道为什么我会收到错误吗？