Псевдонимы веб-пакетов не работают в файлах .js в приложении CRA

Question

Я использую webpack.config.js в своем проекте CRA, который выглядит следующим образом:

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      'components': path.resolve(__dirname, 'src/components'),
      'containers': path.resolve(__dirname, 'src/containers'),
      'images': path.resolve(__dirname, 'src/images'),
      'styles': path.resolve(__dirname, 'src/styles'),
      'utils': path.resolve(__dirname, 'src/utils'),
    },
    extensions: ['.jsx', '.js', '.scss', '.json'],
  },
};

, так что я могу использовать структуру проекта следующим образом:

src
  components
    ...
  containers
    c1
      c1.jsx
      c1.scss
    c2
      c2.jsx
      c2.scss
    index.js
  images
    ...
  styles
    ...
  utils
    ...

Гдеcontainers - это папка внутри папки src, c1 и c2 - это папки, содержащие файлы .jsx и .scss для компонентов (или контейнеров в этом примере), а index.js - это файл, которыйуспешно экспортирует все контейнеры в папке containers для использования в других компонентах, таких как:

import { c1 } from 'containers';

Приведенный выше код работает во всех файлах .jsx, которые я создал, нона данный момент в проекте я создал файл в utils с именем routes.js, который должен импортировать контейнер.Однако, используя приведенную выше строку, я получаю следующую ошибку:

expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

Код указывает на места, где я должен использовать контейнер, поэтому я подумал об изменении строки вотносительный импорт файла:

import { c1 } from '../containers/c1/c1';

И это работает.Но (поправьте меня, если я ошибаюсь), разве расширение .js, объявленное в webpack.config.js, не позволяет псевдонимам работать с моим файлом?Что-то мне не хватает, что я должен добавить, чтобы включить псевдонимы в файлах, отличных от .jsx?Пожалуйста, дайте мне знать, и спасибо за любую помощь заранее.

РЕДАКТИРОВАТЬ: Контейнеры (как c1.jsx) объявлены так:

export function c1() {
  return (
    <div>example</div>
  );
}

Тогдаindex.js внутри папки containers выглядит следующим образом:

export { c1 } from ‘./c1/c1’;
export { c2 } from ‘./c2/c2’;

РЕДАКТИРОВАТЬ # 2: Кажется, что изменение кода на import { c1 } from 'containers/c1/c1'; заставляет его работать, поэтомуреальная проблема в том, что routes.js не распознает индексный файл