web-dev-qa-db-fra.com

L'analyse du module a échoué: jeton inattendu. opérateur "typeof" react-native / index.js

Je suis assez nouveau dans le front-end - j'essaie d'implémenter le côté client sur React. Après avoir ajouté une dépendance "react-native" et exécuté webpack, j'obtiens l'erreur suivante:

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

J'ai les dépendances suivantes dans 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"
  }

Je suppose que l'opérateur "typeof" n'est pas reconnu, mais pourquoi?

reactjsreact-nativewebpacknode-modulestypeof
9
IurKo

Je viens de passer quelques heures à traiter précisément de ce problème.

Tout d'abord, vous pouvez essayer d'ajouter "@babel/preset-flow" à votre .babelrc fichier (après l'installation). Cela a été recommandé ici , mais n'a pas fonctionné pour moi.

Ce qui a fonctionné pour moi était simplement d'ajouter externals: { "react-native": true }, à mon webpack.config.js fichier. Mon fichier de configuration a fini par ressembler à ceci:

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"],
            },
            // ...
        ],
    },
}

Je crois comprendre que react-native est une dépendance, donc @babel/preset-flow n'a pas été déclenché pour aider à interpréter le formatage flow dans ces fichiers - il ne peut gérer que les fichiers dans le "entry" emplacement de votre webpack.config.js fichier.

Espérons que cela aide quelqu'un là-bas. N'hésitez pas à commenter cette réponse si je suis un peu hors de la base et je vais la mettre à jour :)

1
Blundering Philosopher

Essayez-vous d'exécuter React Native dans le navigateur? Si oui, je recommande d'utiliser React Native pour le Web .

react-native ne peut pas s'exécuter dans le navigateur. Vous devez ajouter un alias de react-native à react-native-web dans webpack.config.js, donc ce package est utilisé à la place.

Suite à React Native pour la documentation Web vous devez apporter cette modification à votre configuration webpack:

// webpack.config.js
module.exports = {
    // ...the rest of your config

    resolve: {
        alias: {
            'react-native$': 'react-native-web'
        }
    }
}
1
Tobias Zucali