模块解析失败:意外的令牌.react-native/index.js“typeof"；操作员 [英] Module parse failed: Unexpected token. react-native/index.js "typeof" operator

问题描述

我对前端很陌生 - 尝试在 React 上实现客户端.添加react-native"依赖项并运行 webpack 后，我收到以下错误:

I'm quite new to the front end - trying to implement client side on React. After adding "react-native" dependency and running webpack I'm getting the following error:

ERROR in ./node_modules/react-native/index.js 13:7
Module parse failed: Unexpected token (13:7)
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
| 'use strict';
| 
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
 @ ./node_modules/@react-navigation/native/lib/module/useBackButton.js 2:0-43 5:25-36
 @ ./node_modules/@react-navigation/native/lib/module/index.js
 @ ./src/main/js/app.js

我在 package.json 中有以下依赖项:

I have the following dependencies in package.json:

 "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.1.4",
    "@react-navigation/stack": "^5.2.9",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.1",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "rest": "^2.0.0"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }

我假设无法识别typeof"运算符，但为什么呢?

I assume that "typeof" operator is not recognized, but why?

推荐答案

我刚刚花了几个小时处理这个确切的问题.

I just spent a few hours dealing with this exact issue.

首先，您可以尝试添加"@babel/preset-flow" 到您的 .babelrc 文件(安装后).这是在这里推荐的，但没有实际上对我有用.

First, you can try adding "@babel/preset-flow" to your .babelrc file (after installing). That was recommended here, but didn't actually work for me.

对我有用的只是将 externals: { "react-native": true }, 添加到我的 webpack.config.js 文件中.我的配置文件最终看起来像这样:

What worked for me was just adding externals: { "react-native": true }, to my webpack.config.js file. My config file ended up looking like this:

const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    externals: {
        "react-native": true,
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            // ...
        ],
    },
}

我的理解是 react-native 是一个依赖项，所以 @babel/preset-flow 实际上并没有被触发来帮助解释这些文件中的 flow 格式 - 它可能只处理主文件中的文件entry" webpack.config.js 文件的位置.

My understanding is that react-native is a dependency, so @babel/preset-flow didn't actually get triggered to help interpret the flow formatting in those files - it may only handle files in the main "entry" location of your webpack.config.js file.

希望这对那里的人有所帮助.如果我有点偏离基础，请随时对这个答案发表评论，我会更新这个 :)

Hopefully this helps someone out there. Feel free to comment on this answer if I'm a bit off-base and I'll update this :)

这篇关于模块解析失败:意外的令牌.react-native/index.js“typeof"；操作员的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！