【发布时间】：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]
知道为什么会出现错误吗？
【问题讨论】：
标签： react-native webpack babeljs babel-loader react-native-web