Je suis nouveau pour réagir et j'importe à l'aide d'esmodules mais je reçois toujours une erreur indiquant que la réaction n'est pas définie. Je l'exécute via babel, puis je le regroupe avec webpack. J'ai examiné certaines des autres questions connexes, mais aucune ne semble résoudre mon problème. Pourquoi apparaît-il indéfini et comment puis-je le résoudre ?

Erreur:

Uncaught ReferenceError: React is not defined
    at Object.<anonymous> (bundle.js:formatted:76)
    at n (bundle.js:formatted:11)
    at bundle.js:formatted:71
    at bundle.js:formatted:72

package.json:

{
  "name": "reactTestProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Brandon Lind",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "react": "^16.8.4"
  }
}

fichiers :

Nom de fichier : app.js

 import Square from "./SquareDiv.js";

let main= document.getElementsByTagName("main")[0];
console.log("wtf")

main.appendChild(<Square/>);

Nom de fichier : SquareDiv.js

import React from "react";

class Square extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isOn: true
        }
    }

    getIsOn(){
        let currentState= this.state.isOn;
        let pastState= state;
        if(currentState===false){
           currentState===true; 
        }
        else {
            currentState ===false;
        }

        return pastState;
    }

    render(){
        <div onClick={getIsOn} class="square">this.state.isOn</div>
    }
}

export {Square};

babel.config.js:

const presets=[
    [
        "@babel/preset-env",
        {
            targets:{
                esmodules: true,
                edge: 10,
                chrome: 30,
                safari: 30,
                firefox: 30,
                opera: 30
            }
        }
    ],
    [
        "@babel/preset-react",
        {
                pragma: "pragma",
                pragmaFrag: "pragmaFrag",
                throwIfNamespace: false
        }
    ]
];


module.exports={
    presets
};

webpack.config.js:

module.exports={
    entry: "./src/app.js",
    output:{
        filename: "bundle.js"
    },
    module:{
        rules:[
            {  test: /\.m?js$/,
                exclude: /(node_modules|browsers_components)/,
                use:{
                    loader: "babel-loader",
                    options: {
                            presets: ["@babel/preset-env","@babel/preset-react"]
                    }
                }
            }
        ]
    }
}
0
brandon 15 mars 2019 à 05:26

2 réponses

Meilleure réponse

N'utilisez pas cette syntaxe import React from "./node_modules/react";.

Cela ne fonctionnera que pour les fichiers créés dans le répertoire racine et vos composants se trouvent probablement dans src/.

Webpack résoudra tout pour vous, vous pouvez donc simplement utiliser import React from 'react'; partout.

Remplacez également cette chaîne : export {Square}; par export default Square

Et vous pouvez omettre l'extension .js lors de l'importation, vous pouvez donc l'écrire de cette façon : import Square from "./SquareDiv";

Si vous ne souhaitez pas utiliser l'exportation par défaut, vous devez utiliser import {Square} from "./SquareDiv"

Vous pouvez lire les différences entre les exportations par défaut et normales ici

Vous avez beaucoup de problèmes dans votre extrait de code. J'en ai mentionné quelques-uns dans ma réponse. Il y en a plus :

  • N'utilisez pas le mot clé class dans JSX, il devrait être className
  • Utilisez des accolades pour rendre les valeurs JS comme this.state.isOn
  • Lorsque vous utilisez des gestionnaires, ne l'utilisez pas comme onClick={getIsOn}, utilisez onClick={() => getIsOn()} et etc.

Je vous propose de passer par le tutoriel React qui vous fera gagner beaucoup de temps !

1
flppv 15 mars 2019 à 03:15

App.js doit importer la réaction. Chaque fichier contenant JSX doit être importé et réagir.

Cette erreur particulière se produit parce que le JSX pour Square dans app.js est transpilé dans un appel de méthode React, et puisque vous n'avez pas importé React dans app.js, React n'est pas défini.

MISE À JOUR

De plus, cela corrigera quelques autres erreurs...

Remplacez <div onClick={getIsOn} class="square">this.state.isOn</div> par :

return <div onClick={this.getIsOn} className="square">{this.state.isOn}</div>

1
Craig Gehring 15 mars 2019 à 12:52