javascript - Webpack 别名似乎在 CRA 应用程序的 .js 文件中不起作用

Question

我webpack.config.js在我的 CRA 项目中使用 a，如下所示：

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
    ...

wherecontainers是文件夹内的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无法识别索引文件

标签： javascriptreactjswebpack