Сбой при разборе модуля: непредвиденная ошибка токена, когда webpapck инициирует собственный проект React

Question

сегодня я инициировал новый проект React-Native, затем попытался добавить React-Native-Web. когда я упакую его, я получил следующие ошибки:

ERROR in ./node_modules/react-native/Libraries/NewAppScreen/components/ReloadInstructions.js 11:12
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| 
> import type {Node} from 'react';
| import {Platform, StyleSheet, Text} from 'react-native';
| import React from 'react';
 @ ./node_modules/react-native/Libraries/NewAppScreen/index.js 17:0-65 19:0-79
 @ ./App.js
 @ ./web/index.web.js

и это мое webpack.config.js

var path = require('path');

module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + '/web/index.web.js',
    output: {
      path: __dirname + "/web/public",
      filename: "bundle.js"
    },
    devServer: {
      contentBase: "./web/public",
      historyApiFallback: true,
      inline: true
    } ,
    module: {
      rules: [{
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'file-loader'
        }
      },
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                    cacheDirectory: false,
                    plugins: [
                      '@babel/plugin-transform-runtime'
                    ]
                  }
              },
              exclude: /node_modules/,

          },
          {
              test: /\.css$/,
              use: ["style-loader", "css-loader"],
          }
      ]
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: [ '.web.js', '.js' ]
  }
  }

это мое package.json

{
  "name": "app2",
  "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 .",
    "build": "NODE_ENV=production webpack --config ./webpack.config.js --progress",
    "webserver": "webpack-dev-server --open"
  },
  "dependencies": {
    "acorn-dynamic-import": "^4.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "react": "16.9.0",
    "react-native": "0.61.2",
    "style-loader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "@babel/runtime": "7.6.3",
    "@react-native-community/eslint-config": "0.0.3",
    "acorn": "^6.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.5.1",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-dom": "^16.10.2",
    "react-native-web": "^0.11.7",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

КакЯ знаю, что проекту нужно ccs-loader, чтобы изменить #import на require, и я добавляю его, но он все равно выдает ошибки. Я новичок, так что у кого-нибудь есть идеи?

---

как напоминание @lavor, спасибо, я добавляю ..babelrc сюда

{
    "presets": [
        "module:metro-react-native-babel-preset","@babel/preset-env", "@babel/preset-react"
    ]
}

Answer 1

Ошибка, на которую вы ссылались, говорит о неправильном синтаксисе импорта, по адресу:

import type {Node} from 'react';

Это синтаксис Flow . Вы не настроили ваш babel-загрузчик для обработки синтаксиса потока (но это, вероятно, единственная зависимая проблема, так как ошибка находится в исходном коде реактивного кода). Убедитесь, что вы не заменили конфигурацию babel на конфигурацию, использующую реагирующую систему. Здесь сообщается о подобной проблеме .