Javascript 为什么我得到一个未定义的错误？

我是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

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

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

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

文件：

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

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

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

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

文件名：app.js

 import Square from "./SquareDiv.js";

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

main.appendChild(<Square/>);

webpack.config.js:

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

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

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

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

---

不要使用此语法

从“/node\u modules/React”导入React

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

Webpack将为您解决所有问题，因此您只需使用
import React from'React'无处不在

也替换这个字符串：
export{Square}带
导出默认方块

导入时可以省略
.js
扩展名，因此可以这样编写：
从“/SquareDiv”导入Square

如果您不想使用默认导出，您应该使用“/SquareDiv”
import{Square}from“/SquareDiv”

您可以读取默认导出和常规导出之间的差异

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


不要在JSX中使用
class
关键字，它应该是
className
使用大括号渲染JS值，如
this.state.isOn
使用处理程序时，不要像使用
onClick={getIsOn}
那样使用它，而要使用
onClick={（）=>getIsOn（）}
等等

我建议你通过考试，这样会节省你很多时间
 不要使用此语法
从“/node\u modules/React”导入React

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

Webpack将为您解决所有问题，因此您只需使用
import React from'React'无处不在

也替换这个字符串：
export{Square}带
导出默认方块

导入时可以省略
.js
扩展名，因此可以这样编写：
从“/SquareDiv”导入Square

如果您不想使用默认导出，您应该使用“/SquareDiv”
import{Square}from“/SquareDiv”

您可以读取默认导出和常规导出之间的差异

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


不要在JSX中使用
class
关键字，它应该是
className
使用大括号渲染JS值，如
this.state.isOn
使用处理程序时，不要像使用
onClick={getIsOn}
那样使用它，而要使用
onClick={（）=>getIsOn（）}
等等

我建议你通过考试，这样会节省你很多时间
 App.js需要导入react。每个包含JSX的文件都必须导入react

发生此特定错误的原因是app.js中Square的JSX正在被传输到React方法调用中，并且由于您尚未在app.js中导入React，因此未定义React

更新

此外，这将修复其他几个错误

将
此.state.isOn更改为：

返回{this.state.isOn}
App.js需要导入react。每个包含JSX的文件都必须导入react

发生此特定错误的原因是app.js中Square的JSX正在被传输到React方法调用中，并且由于您尚未在app.js中导入React，因此未定义React

更新

此外，这将修复其他几个错误

将
此.state.isOn更改为：

返回{this.state.isOn}
为什么组件文件中有两种不同的react导入方法。应该是
从“React”导入React对于所有文件，请共享项目的文件夹结构好吗？或者您已经使用react create app创建了项目？或者从git存储库中克隆？是的，这就是了，感谢为什么在组件文件中使用两种不同的导入方法。应该是
从“React”导入React对于所有文件，请共享项目的文件夹结构好吗？或者您已经使用react create app创建了项目？还是从git存储库克隆的？是的，给你，谢谢哦，谢谢，我刚刚修复了。为了让它发挥作用，我做了各种各样的事情，包括这个。我把它恢复为“反应”，它仍然不起作用。@brandon是同一个错误还是另一个错误？此外，我还更新了另一个小细节的答案。@brandon从您向我们展示的代码片段来看，这是不可能的，应该是其他组件中的另一个错误或React错误。我尝试了默认的方形语法，它在我的根文件夹中有相同的错误。我只有babel.config.js、webpack.config.js、dist、index.html、node_modules、package.json，package-lock.json和src[app.js，SquareDiv.js]噢，谢谢你，我刚刚解决了这个问题。为了让它发挥作用，我做了各种各样的事情，包括这个。我把它恢复为“反应”，它仍然不起作用。@brandon是同一个错误还是另一个错误？此外，我还更新了另一个小细节的答案。@brandon从您向我们展示的代码片段来看，这是不可能的，应该是其他组件中的另一个错误或React错误。我尝试了默认的方形语法，它在我的根文件夹中有相同的错误。我只有babel.config.js、webpack.config.js、dist、index.html、node_modules、package.json，package-lock.json和src[app.js，SquareDiv.js]感谢您的回复，我试着说它不起作用。如果您想搞乱它，我只是在上面的评论中添加了一个git hub repo。在repo中，我已将react导入这两个文件，并且这些文件位于src文件夹中。我更新了我的答案以获得帮助