Question

我尝试使用 Webpack 进行响应。但是在我使用 babel 之前，我没有收到错误消息。现在我在浏览器控制台中收到此错误消息：未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

index.jsx

import { App } from './App';

const domTarget = document.querySelector('#react-app');
ReactDOM.render(<App />, domTarget);

App.jsx

import { Message } from './Message';

export class App extends React.Component {
    render() {
        return (
            <div>
            <Message headline="New Title1"/>
            <Message headline="New Title2"/>
            </div>
        )
    }
}

Message.jsx

import { Headline } from './Headline';

export class Message extends React.Component {
    render() {
        return (
            <div>
                <Headline headline={this.props.headline}/>
            </div>
        )
    }
}

headline.jsx

export const Headline = props => {
    return <h1>{props.headline}</h1>;
};

.webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src', 'index.jsx'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.js', '.jsx' ]
  },
};

反应未捕获错误：元素类型无效：预期为

0 个答案: