webpack-dev-server上で、モジュールのインポートがCannot find module ' ' になる

Question

前提

お世話になります。
reactの開発をwebpack-dev-server上で進めているのですが、
インポートしたモジュールに対してエラーが出ておりまして、解決できずに困っております。
当方、react、webpack共に初歩的な基礎を学習している段階であまり詳しくありません。

ファイル構成

.
├── dist
├── node_modules
├── src
├── .babelrc
├── .eslintrc.json
├── babel.config.json
├── package-lock.json
├── package.json
└── webpack.config.js

srcの中身は以下になります。

src.
├── components
│   └── ChildArea.jsx
├── App.js
├── index.html
├── index.js
├── style.css
├── style.scss

package.json

{
  "name": "oneday-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "launch": "webpack-dev-server --open --mode production",
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "live-server": "^1.2.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.8",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  }
}

webpack.config.jsの設定

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const outputPath = path.resolve(__dirname, 'dist');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: outputPath,
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /.(sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /.(jpe?g|png|gif|svg|ico)$/i,
        loader: 'url-loader',
        options: {
          limit: 2048,
          name: './images/[name].[ext]',
        },
      },
      {
        test: /.html$/,
        loader: 'html-loader',
      },
    ],
  },
  devServer: {
    contentBase: outputPath,
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[]',
      filename: '[name].[hash].css',
    }),
  ],
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
      new OptimizeCssAssetsPlugin({}),
    ],
  },
  devtool: 'eval-source-map',
};

該当ファイル

index.js ↓

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './style.css';
import './style.scss';

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

App.js ↓

import React, { useState } from 'react';
import { ChildArea } from './components/ChildArea';

export default function App() {
  return (
    <div className="App">
      <ChildArea />
    </div>
  );
}

ChildArea.jsx ↓

export const ChildArea = () => {
  return (
    <div>
      <p>子コンポーネント</p>
    </div>
  )
}

エラーについて

App.jsにChildArea.jsxをインポートしたところ、以下のエラーがコンソールに表示されます。

App.js:5 Uncaught Error: Cannot find module './components/ChildArea'
    at webpackMissingModule (App.js:5)
    at eval (App.js:5)
    at Module../src/App.js (main.js:605)
    at __webpack_require__ (main.js:20)
    at eval (index.js?b635:1)
    at Module../src/index.js (main.js:617)
    at __webpack_require__ (main.js:20)
    at Object.0 (main.js:651)
    at __webpack_require__ (main.js:20)
    at main.js:84

解決方法がわからず困っております。
パスの記述方法がおかしいのでしょうか。
お詳しい方、お力添えをいただけませんでしょうか。
宜しくお願いいたします。

Answer 1

自己解決しました。

ChildArea.jsxをデフォルトエクスポートにし、
App.jsでのインポートを以下に書き換えることで表示されました。

import ChildArea from './components/ChildArea.jsx';