Yarn Workspaces React Monorepo中Components绝对导入失效问题咨询

Great question—let’s break down why this is happening and how to fix it.

The Core Difference Between components and fe1/fe2 #

Your fe1 and fe2 apps are built with Create React App (CRA) and use craco. CRA’s underlying build tool (Webpack) automatically reads your jsconfig.json’s baseUrl setting and configures module resolution to treat the src folder as a root for absolute imports. Craco just extends this behavior without overriding it, so your absolute imports work seamlessly there.

But your components package isn’t a CRA project—it’s a standalone package without CRA’s/Webpack’s built-in logic to parse jsconfig.json for module resolution. The jsconfig.json in components only helps your code editor (like VS Code) understand path autocompletion and jumps, but it doesn’t tell Node.js or the build tools (when importing components into fe1/fe2) how to resolve those absolute paths. That’s why you’re stuck using relative imports.

Fixes to Enable Absolute Imports in components #

1. Use babel-plugin-module-resolver (Recommended)

This Babel plugin lets you configure custom module resolution rules, mimicking CRA’s behavior for your standalone package.

• First, install the plugin:

  npm install --save-dev babel-plugin-module-resolver
  # or yarn add -D babel-plugin-module-resolver
  

• Create a babel.config.json (or update an existing one) in your components root:

  {
    "plugins": [
      [
        "module-resolver",
        {
          "root": ["./src"],
          "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
      ]
    ]
  }
  

This tells Babel to treat the src folder as a root, so you can use import { test } from 'folder' instead of relative paths. Since fe1/fe2 use Babel to transpile imported code from components, this will work when you import components into those apps.

2. Configure Package Exports (Alternative)

If you don’t want to add a Babel plugin, you can adjust your components/package.json to expose subdirectories directly:

{
  "name": "@your-monorepo/components",
  "exports": {
    "./folder": "./src/folder/index.js",
    "./another-folder": "./src/another-folder/index.js"
  }
}

Then you can import like:

import { test } from '@your-monorepo/components/folder';

This is less flexible if you have many subfolders, but works for simpler setups.

3. Update Monorepo Workspace Resolution (If Using Yarn/Pnpm/Npm Workspaces)

Make sure your monorepo’s root package.json has workspace config (if not already), then in fe1/fe2, you can add a Webpack alias via craco to point components imports to the components/src folder. For example, in fe1/craco.config.js:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'folder': path.resolve(__dirname, '../components/src/folder'),
      // Add other aliases as needed
    }
  }
};

This works, but you’d have to add an alias for every folder in components/src, which isn’t ideal for larger packages.

Key Takeaway #

jsconfig.json is for editor tooling, not runtime/build resolution. CRA handles this automatically, but standalone packages need explicit build tool configuration (like Babel plugins) to support absolute imports.

内容的提问来源于stack exchange，提问作者Spiff