Question

我是React的新手，我正在使用esmodules导入，但是我不断收到错误消息，告知react未定义。我正在通过babel运行它，然后将其与webpack捆绑在一起。我已经看过其他一些相关的问题，但似乎都没有帮助解决我的问题。为什么会出现未定义的错误，我该如何解决？

错误：

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

文件：

文件名：app.js

 import Square from "./SquareDiv.js";

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

main.appendChild(<Square/>);

文件名：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

请勿使用此语法import React from "./node_modules/react";。

它仅适用于在根目录中创建的文件，并且您的组件可能位于src/中。

Webpack将为您解决所有问题，因此您可以在任何地方使用import React from 'react';。

也将此字符串：export {Square};替换为export default Square

并且您可以在导入时省略扩展名.js，因此可以这样写：import Square from "./SquareDiv";

如果您不想使用默认导出，则应使用import {Square} from "./SquareDiv"

您可以阅读默认导出和常规导出here

之间的区别

您的代码段中有很多问题。我在回答中提到了其中一些。他们更多：

在JSX中不要使用class关键字，它应该是className
使用大括号呈现this.state.isOn之类的JS值
使用处理程序时，请勿像onClick={getIsOn}，onClick={() => getIsOn()}等那样使用它。

我建议您阅读React tutorial，这样可以节省很多时间！

Answer 2

App.js需要导入react。每个包含JSX的文件都必须导入react。

发生此特定错误是因为app.js中的Square的JSX被转换为React方法调用，并且由于您没有在app.js中导入React，所以未定义React。

更新

此外，这将修复其他一些错误...

将<div onClick={getIsOn} class="square">this.state.isOn</div>更改为：

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

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

2 个答案: