Как настроить Webpack5 так, что бы можно было импортировать файлы без явного указания расширения .js .jsx?

Question

[Fastor1us]

Создаю приложение react на вебпаке. Столкнулся с проблемой, не получается настроить импорт файлов без явного указания расширения файлов при импорте.
Например, имеем файл index.js с импортом компонента App находящимся на том же уровне вложенности.
Работает:
import App from './app.jsx';
Не работает:
import App from './app';
- ошибка:
Module not found: Can't resolve './app' in 'C:\Users\KO\Documents\Projects\game2cube\frontend\src'
frontend/src/index.js

Важно добавить - в некоторых местах проекта, при текущем конфиге, импорт работает без явного указания расширения.
Например ./frontend/src/pages/game-page/game-page.jsx:
import Cell from '../../components/cell/cell';

Конфиги:
webpack.common.cjs:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  entry: './frontend/src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './frontend/build'),
    clean: true,
    // publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-react',
              '@babel/preset-env',
            ],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.module\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        type: 'asset/resource',
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './frontend/public/index.html',
    }),
    new MiniCssExtractPlugin(),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
    // modules: [
    //   path.resolve(__dirname, 'frontend/src'), 'node_modules'
    // ],
  },
};

webpack.dev.cjs:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.cjs');
const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');


module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: path.resolve(__dirname, './frontend/public'),
    port: 3000,
    historyApiFallback: true,
    hot: true,
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
  ],
});

запускаю проект так:
"f-start": "webpack serve --open --config webpack.dev.cjs",