为什么我收到未定义的错误错误？

Question

I'm new to react and I'm importing using esmodules but I keep getting an error telling react is undefined. I'm running it through babel and then bundling it with webpack. I've looked at some of the other related questions but none seem to be helping with my problem. Why is it comming up undefined and how can I fix it?

Error:

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"
  }
}

files:

filename: app.js

 import Square from "./SquareDiv.js";

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

main.appendChild(<Square/>);

filename: 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"]
                    }
                }
            }
        ]
    }
}

Answer 1

Don't use this syntax import React from "./node_modules/react"; .

It will work only for files that are created in the root directory, and your components are likely in src/ .

Webpack will resolve everything for you, so you can just use import React from 'react'; everywhere.

Also replace this string: export {Square}; with export default Square

And you can omit .js extension when import, so you can write it this way: import Square from "./SquareDiv";

If you don't want to use default export, you should use import {Square} from "./SquareDiv"

You can read the differences between default and regular exports here

You have a lot of problems in your code snippet. I mentioned some of them in my answer. There are more of them:

• Don't use class keyword in JSX, it should be className
• Use curly braces to render JS values like this.state.isOn
• When you use handlers, don't use it like onClick={getIsOn} , use onClick={() => getIsOn()} and etc.

I suggest you to go through React tutorial which will save your time a lot!

Answer 2

App.js needs to import react. Every file that has JSX in it has to import react.

This particular error is happening because the JSX for Square in app.js is getting transpiled into a React method call, and since you haven't imported React in app.js, React is not defined.

UPDATE

Also, this will fix a couple other errors...

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

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