Trouble Implementing Absolute Paths in Farm Project Using Aliases

[deepumandal]

Question:

Trouble Implementing Absolute Paths in Farm Project Using Aliases

I've been working on a React project, and to simplify my imports, I decided to use absolute paths instead of relative paths like ../../components/Button. However, I'm running into an issue where the build process fails to resolve the alias.

Error Message:

[ Farm ] Using config file at C:\Users\devwo\OneDrive\Desktop\Projects\farm-fe-tutorial\farm.config.ts
[ building ] ⠂ transform (136) node_modules/.pnpm/core-js@3.38.1/node_modules/core-js/internals/to-length.js.farm-runtime        
                 [ Farm ] Error: Failed to build: Error: Can not resolve `@AppTypes/commonTypes` from src/main.tsx.
Original error: None.

Potential Causes:
1.The file that `@AppTypes/commonTypes` points to does not exist.
2.Install it first if `@AppTypes/commonTypes` is an dependency from node_modules, if you are using pnpm refer to [https://pnpm.io/faq#pnpm-does-not-work-with-your-project-here] for solutions.
3. If `@AppTypes/commonTypes` is a alias, make sure your alias config is correct.

 ELIFECYCLE  Command failed with exit code 1.

File Structure:

project-root/
├── src/
│   ├── @types/
│   │   └── commonTypes.ts
│   ├── main.tsx
├── farm.config.ts
├── tsconfig.json

Relevant Code:

commonTypes.ts

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type AnyType = any;

main.tsx

import { AnyType } from "@AppTypes/commonTypes";
// Other imports and code...

farm.config.ts

import { defineConfig } from "@farmfe/core";

export default defineConfig({
  plugins: ["@farmfe/plugin-react"],
  compilation: {
    resolve: {
      alias: {
        "@AppTypes/*": "./src/@types/*",
      },
    },
  },
});

tsconfig.ts

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./",
    "paths": {
      "@AppTypes/*": ["./src/@types/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Steps Taken:

• Verified that commonTypes.ts exists in the src/@types directory.
• Checked alias configurations in both farm.config.ts and tsconfig.json.
• Cleared the pnpm cache using pnpm store prune.
• Simplified alias configuration to ensure no conflicts.
• Restarted the build process multiple times.

Issue:

Despite the configurations being correct and the file existing at the specified path, the build process fails to resolve the alias @AppTypes/commonTypes.

Request for Assistance:

I'm seeking help to identify any potential misconfigurations or overlooked aspects that might be causing this issue. Any insights or suggestions would be greatly appreciated.

---

For more details, please review my GitHub repository.

[wre232114]

Farm does not support configuring wildcard alias. And the alias value should be absolute path. Following farm.config.ts would work:

import path from 'path'
import { defineConfig } from "@farmfe/core";

export default defineConfig({
  plugins: ["@farmfe/plugin-react"],
  compilation: {
    resolve: {
      alias: {
        "@AppTypes/": path.join(__dirname, 'src', '@types'),
      },
    },
  },
});

[deepumandal]

Yes, It works, @wre232114 Thanks bro.