Javascript reactjs的bundle.js中存在未捕获错误

我正在开始使用react js，构建我的第一个组件，我被这个错误卡住了

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."

为此，我使用的编辑器是visual studio 2017

webpack.config.js的代码为

module.exports = {
  context: __dirname,
  entry: "./app.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  watch: true,
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use:
        {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env', 'babel-preset-react', ]
          }
        }
    }
    ]
  }
}

app.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <Button />,
    document.getElementById('root')
);

class Button extends React.Component {
    render() {
        return (<button>42</button>);
    }
}

从“React”导入React；
从“react dom”导入react dom；
ReactDOM.render(
,
document.getElementById（'root'））
);
类按钮扩展了React.Component{
render（）{
返回（42）；
}
}

我正在呈现的页面是index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index test</h2>

<div id="root"></div>

@section scripts{

    <script src="~/Scripts/React/dist/bundle.js"></script>
}

@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
指数测试
@节脚本{
}

在我在app.js中做了一个更改之后，下一步是转到cmd提示符并执行npm运行webpack

---

感谢您在声明组件之前提供的帮助。 这不起作用，因为javascript类不会被提升。 这应该行得通

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
    render() {
        return (<button>42</button>);
    }
}

ReactDOM.render(
    <Button />,
    document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
类按钮扩展了React.Component{
render（）{
返回（42）；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

在声明组件之前，您正在使用该组件。 这不起作用，因为javascript类不会被提升。 这应该行得通

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
    render() {
        return (<button>42</button>);
    }
}

ReactDOM.render(
    <Button />,
    document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
类按钮扩展了React.Component{
render（）{
返回（42）；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

我建议您在回答中补充一点，JavaScript类没有被提升。这是一个错误。谢谢您的帮助help@lustoykov是的，谢谢，现在加上去了。ankur请接受答案，如果有帮助的话：）我建议你在答案中加上JavaScript类没有被提升的错误。谢谢你的回答help@lustoykov是的，谢谢，现在加上去了。ankur请接受答案，如果它有帮助：）旁注：如果你还没有，我会使用网页开发服务器：。您提到了您的更改过程并运行了webpack，所以我想我应该提到它。旁注：如果您还没有，我将使用webpack dev server:。你提到了你的改变和运行网页的过程，所以我想我应该提一下。