Ошибка реагирования: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: object

Question

Я получаю следующую ошибку от React, и моя страница не загружается: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Это происходит, когда я использую объявления import в верхней части моего компонента React, например import React from "react".

Согласно этому вопросу о переполнении стека, ответом является изменение module.exports = ComponentName на export default ComponentName, но в моем случае оба фрагмента кода выдают одну и ту же ошибку.

Может ли кто-нибудь помочь мне выяснить причину ошибки?

Register.jsx

import React from "react";

const Register = () => {
  return (
    <div>registration page</div>
  )
}
export default Register

webpack.js

const path = require('path');

module.exports = {
  mode: 'production',
  context: path.join(__dirname, './'),
  entry: './app/app.jsx',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // loader: 'jsx-loader',
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/,
        include: path.join(__dirname, 'app'),
      },
    ],
  },
};

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Answer 1

Вы, вероятно, импортируете неправильно.Поскольку вы экспортируете по умолчанию, измените свой импорт с:

import { Register } from '<some_path>/Register';

на:

import Register from '<some_path>/Register';

или стиль CommonJS:

const Register = require('<some_path>/Register');

до

const Register = require('<some_path>/Register').default;