Question

这是我第一次尝试使用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/

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

反应本地Web项目无法编译

0 个答案: