Я создал собственное приложение, выполнив react-native init ReactNativeWeb.
Затем я следовал инструкциям здесь , чтобы добавить к нему реагирующую нативную сеть.
Я также добавил файл 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: Невозможно прочитать свойство '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/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-сервер / клиент? http://localhost:8080 (webpack) /hot/dev-server.js ./index.web.js main [2]
Есть идеи, почему я получаю ошибку?