Question

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

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无法识别索引文件< / p>

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

0 个答案: