ReactJS跨项目导入组件报错：不支持src目录外相对导入

Alright, let's tackle this problem head-on. The error you're seeing is a classic restriction from Create React App (CRA), which blocks relative imports outside the src/ directory by default. Your symlink attempt might have failed due to incorrect setup or CRA's module caching—let's go through several reliable solutions, from quick fixes to more scalable approaches:

1. Fix Your Symbol Link Setup (Quickest Temporary Fix) #

If you want to stick with symlinks, the issue is likely either the path you used or how you're importing the component. Here's how to do it right:

• First, pick a package name for your A-app component (e.g., a-dashboard-container).
• Open your terminal and navigate to B-app's node_modules folder:

  cd /path/to/B-app/node_modules
  

• Create a symlink pointing directly to your A-app component directory:

  ln -s /path/to/A-app/src/components/Dashboard/container a-dashboard-container
  

  Note: On Windows, use mklink /J a-dashboard-container "C:\path\to\A-app\src\components\Dashboard\container" instead, and run Command Prompt as Administrator.
• Now, in B-app's App.js, import the component using the symlink name (not a relative path):

  import DashboardContainer from 'a-dashboard-container';
  

• Critical step: Restart your B-app development server (npm start again)—CRA caches module paths, so it won't pick up new symlinks without a restart.

2. Override CRA's Webpack Config (More Flexible) #

CRA doesn't let you edit webpack config directly, but tools like craco or react-app-rewired let you bypass this restriction. Let's use craco since it's simpler:

• Install craco in B-app:

  npm install @craco/craco --save-dev
  

• Create a craco.config.js file in B-app's root directory:

  const path = require('path');
  
  module.exports = {
    webpack: {
      alias: {
        // Map a custom alias to your A-app component
        '@a-dashboard': path.resolve(__dirname, '../A-app/src/components/Dashboard/container')
      }
    }
  };
  

• Update your package.json scripts to use craco instead of react-scripts:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

• Import the component using your alias:

  import DashboardContainer from '@a-dashboard';
  

• Restart your dev server, and you're good to go.

If you want to allow imports from the entire A-app src directory (not just one component), modify the craco.config.js to extend CRA's module rules:

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // Find the rule that handles JS/JSX files
      const jsRule = webpackConfig.module.rules.find(rule => 
        rule.test.toString().includes('js|jsx')
      );
      // Add A-app's src directory to the allowed import paths
      jsRule.include.push(path.resolve(__dirname, '../A-app/src'));
      return webpackConfig;
    }
  }
};

3. Publish as a Private NPM Package (Best for Long-Term) #

If you plan to reuse this component across multiple projects, turning it into a private npm package is the most scalable approach. Here's how to test it locally first:

• Navigate to your A-app component directory:

  cd /path/to/A-app/src/components/Dashboard/container
  

• Initialize a package.json for the component:

  npm init -y
  

• Update the name field in this new package.json to something unique (e.g., @your-username/dashboard-container).
• Run npm link in the component directory to register it locally.
• Switch back to B-app and run:

  npm link @your-username/dashboard-container
  

• Now you can import it like any other npm package:

  import DashboardContainer from '@your-username/dashboard-container';
  

For production, you can publish it to a private npm registry (like Verdaccio or GitHub Packages) so your team can install it via npm install.

Why Your Original Symlink Failed #

Chances are, one of these was the issue:

• You used a relative path (like ../../) to import the component instead of the symlink's package name.
• You didn't restart the CRA dev server, so it didn't detect the new symlink.
• On Windows, you didn't create the symlink with administrator privileges.
• The symlink path was incorrect (double-check the absolute paths to both directories).

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