反应本地Web项目无法编译

问题描述

这是我第一次尝试使用webdev运行本机响应，但是当我尝试运行项目时，出现以下错误：

ERROR in ./index.web.js
Module build Failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-react' from 'D:\Parentlane\ReactNativeWeb'
    at Function.resolveSync [as sync] (D:\Parentlane\ReactNativeWeb\node_modules\resolve\lib\sync.js:89:15)
    at resolveStandardizedname (D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\files\plugins.js:101:31)  
    at resolvePreset (D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)     
    at D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)   
    at createPresetDescriptors (D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at D:\Parentlane\ReactNativeWeb\node_modules\@babel\core\lib\config\config-descriptors.js:58:104

package.json：

{
  "name": "ReactNativeWeb","version": "0.0.1","private": true,"scripts": {
    "android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."
  },"dependencies": {
    "babel-loader": "^8.1.0","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","react": "16.13.1","react-dom": "^16.13.1","react-native": "0.63.2","react-native-web": "^0.13.12","webpack": "^4.44.1"
  },"devDependencies": {
    "@babel/core": "^7.11.6","@babel/runtime": "^7.11.2","@react-native-community/eslint-config": "^2.0.0","babel-jest": "^26.3.0","eslint": "^7.9.0","jest": "^26.4.2","metro-react-native-babel-preset": "^0.63.0","react-test-renderer": "16.13.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  },"jest": {
    "preset": "react-native"
  }
}

webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: {
    main: './index.web.js',},module: {
    rules: [
      {
        test: /\.js?$/,exclude: /node_modules/,loader: 'babel-loader',query: {
            presets: ['@babel/react','@babel/es2015'],],resolve: {
    alias: {
      'react-native': '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') });

我正在关注以下教程： https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

任何人都可以让我知道我哪里出错了吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）