用于 reactjs 的 bundle.js 中未捕获的错误

Ankur 发表于 Dev

锚

我开始使用 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', ]
          }
        }
    }
    ]
  }
}

应用程序.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>);
    }
}

我渲染的页面是 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>
}

在我对 app.js 进行更改后，下一步是进入 cmd 提示符并执行 npm run webpack。

谢谢您的帮助

supra28

您在声明之前正在使用该组件。这不起作用，因为 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')
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。