baseUrl and paths not working on heft.

[Dangerous-Mind]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version 1.22.1
• Node.js version 22.21.11

Issue description

I'm upgrading a SPFx solution to SPFx 1.22.1 and also to heft and I'm getting the message:
[build:webpack] lib/webparts/xxxApp/components/routes/IndexRoutes.js:9:0 - Module not found: Error: Can't resolve '@Store/Store' in 'C:\_Projects\xxxApp\lib\webparts\xxxApp\components\routes'

My tsconfig.json still has the same code that worked previously for the paths and I don't have any errors/warnings on intelisense before I make the heft build.

{
  "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json",
  "compilerOptions": {
    "target": "es2021",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "noImplicitAny": true,

    "typeRoots": ["./node_modules/@types", "./node_modules/@microsoft"],
    "types": ["webpack-env"],
    "lib": [
      "es5",
      "es6",
      "es2015",
      "es2018",
      "es2021",
      "dom",
      "es2015.collection",
      "es2015.promise"
    ],
    "baseUrl": "./src",
    "paths": {
      "@Store/*": ["./store/*"],
      "@Models/*": ["./models/*"],
      "@Helpers/*": ["./helpers/*"],
      "@Common/*": ["./common/*"],
      "@Components/*": ["./components/*"],
      "@Services/*": ["./services/*"],
      "@types/*": ["./types/*"],
      "@Webparts/*": ["./webparts/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Anyone know how to add paths on SPFx/heft solutions?

[Ashlesha-MSFT]

Hello @Dangerous-Mind,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.
If you don’t receive a reply within two working days, please use this escalation form to escalate.

[kbeverforden]

@Dangerous-Mind We also use paths and were able to upgrade to 1.22. Our .tsconfig looks slightly different than yours. Along with the .tsconfig file we also have changes in the webpack patch file. The guide for adding a patch file can be found here https://learn.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/customize-heft-toolchain-customize-webpack-config

.tsconfig

{
    "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json",
    "compilerOptions": {
        "target": "ES2020",
        "inlineSources": false,
        "strictNullChecks": false,
        "strict": false,
        "noUnusedLocals": false,
        "removeComments": false,
        "resolveJsonModule": true,
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "lib": [
            "ES2020",
            "dom"
        ],
        
        "baseUrl": ".", 
        "paths": {
            "@services/*": [
                "src/services/*"
            ],
            "@interfaces/*": [
                "src/interfaces/*"
            ],
            "@components/*": [
                "src/components/*"
            ],
            "@assets/*": [
                "src/assets/*"
            ],
            "@styles/*": [
                "src/assets/styles/*"
            ],
            "@css/*": [
                "src/assets/css/*"
            ],
            "@images/*": [
                "src/assets/images/*"
            ],
            "@constants/*": [
                "src/constants/*"
            ],
            "@customTypes/*": [
                "src/types/*"
            ],
            "@enums/*": [
                "src/enums/*"
            ],
            "@settings": [
                "src/settings.ts"
            ]
        }
    }
}

webpack patch file

const path = require('path');
const webpack = require('webpack');

module.exports = function (generatedConfiguration)
{
        if (!generatedConfiguration.resolve.alias)
                generatedConfiguration.resolve.alias = {};

    const rootDir = path.resolve(__dirname, '..');

    generatedConfiguration.resolve.alias['@services'] = path.resolve(rootDir, 'lib/services/');
    generatedConfiguration.resolve.alias['@interfaces'] = path.resolve(rootDir, 'lib/interfaces/');
    generatedConfiguration.resolve.alias['@components'] = path.resolve(rootDir, 'lib/components/');
    generatedConfiguration.resolve.alias['@assets'] = path.resolve(rootDir, 'lib/assets/');
    generatedConfiguration.resolve.alias['@styles'] = path.resolve(rootDir, 'lib/assets/styles/');
    generatedConfiguration.resolve.alias['@css'] = path.resolve(rootDir, 'lib/assets/css/');
    generatedConfiguration.resolve.alias['@images'] = path.resolve(rootDir, 'lib/assets/images/');
    generatedConfiguration.resolve.alias['@constants'] = path.resolve(rootDir, 'lib/constants/');
    generatedConfiguration.resolve.alias['@customTypes'] = path.resolve(rootDir, 'lib/types/');
    generatedConfiguration.resolve.alias['@enums'] = path.resolve(rootDir, 'lib/enums/');
    generatedConfiguration.resolve.alias['@settings'] = path.resolve(rootDir, 'lib/settings.js');
   
    return generatedConfiguration;
};