使用Craco的Create React App中Import别名无法正常工作求助

Let's walk through the key checks and fixes to get your import aliases working for production builds. I've worked through similar issues with CRA + Craco, so here's what to verify step by step:

1. Make Sure You're Using Craco for the Build Script #

This is the most common oversight! If your package.json still uses the default react-scripts build, Craco's webpack config (including aliases) won't be applied. Update your scripts:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build", // Replace react-scripts build with this
    "test": "craco test"
  }
}

2. Validate Your Craco Config #

Double-check that your craco.config.js correctly maps aliases to absolute paths. For your pages alias, it should look like this:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'pages': path.resolve(__dirname, 'src/pages/'),
      // Add other aliases like '@' if needed
    }
  },
  // Optional: Enable TypeScript type checking to catch alias mismatches early
  typescript: {
    enableTypeChecking: true
  }
};

3. Align tsconfig.json with Your Aliases #

Your tsconfig.json's baseUrl and paths must mirror the aliases in Craco. Ensure it's configured like this:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "pages/*": ["pages/*"], // Matches the Craco alias for subdirectories
      // Add other path mappings here
    },
    // Rest of your compiler options...
  },
  "include": ["src"]
}

Note: The * in paths ensures nested imports (like pages/AdminLand/Components) work too.

4. Clear Build & Cache Data #

Stale cache can prevent new configs from taking effect. Run these commands to clean up:

rm -rf build node_modules/.cache
npm install # Optional, but ensures dependencies are fresh

5. Check for Case Sensitivity Issues #

On Linux/macOS, file paths are case-sensitive. If your import uses pages/AdminLand but the actual file is named adminLand (or vice versa), the build will fail. Verify the exact casing of your files and imports match.

6. Verify Craco & CRA Version Compatibility #

Node v14.2.0 is quite old, so make sure your Craco version is compatible with your CRA version. For example:

• CRA 4.x requires Craco 6.x
• CRA 5.x requires Craco 7.x+
  If you're using an incompatible version, update Craco to match your CRA setup.

7. Remove Conflicting Babel Resolver Config #

You mentioned trying the babel resolver plugin—since Craco handles webpack aliases directly, this plugin might conflict. Remove any babel resolver settings from your babel.config.js or .babelrc to avoid clashes.

After going through these steps, run npm run build again. If the issue persists, double-check that src/pages/AdminLand exists exactly where your alias points, and that your imports don't have typos.

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