从父目录导入组件遇Webpack编译报错，求解决方法

架构老林

2026-8-17

解决跨目录导入JSX组件的编译失败问题

问题核心：你的.js文件里写了JSX语法，但webpack只给项目内部的JS文件配置了转译JSX的loader（比如babel-loader），父目录的design-system文件不在处理范围内，所以没被转译，导致识别不了JSX的<>语法。

解决步骤：

调整webpack的loader处理范围
找到项目的webpack配置文件（一般是webpack.config.js），修改处理JS/JSX的规则，把父目录的design-system目录加入loader的处理范围：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 方法1：排除node_modules，但不排除design-system
        exclude: /node_modules(?!\/design-system)/,
        // 或者方法2：明确指定要处理的目录
        // include: [
        //   path.resolve(__dirname, 'src'),
        //   path.resolve(__dirname, '../../design-system/src'),
        // ],
        use: 'babel-loader',
      },
    ],
  },
};

确认babel配置支持JSX转译
检查项目的babel配置文件（比如.babelrc或babel.config.js），确保已经启用了@babel/preset-react：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
如果没安装相关依赖，先执行安装命令：
```
npm install --save-dev @babel/preset-react @babel/preset-env babel-loader
```
备选方案（更规范的复用方式）
如果是Create React App这类隐藏webpack配置的项目，不想折腾配置的话，可以把design-system打包成私有npm包，通过npm安装后导入，这样既不会有loader问题，组件复用也更规范。