storybook upgrade 6 to 7: [ERROR] Could not resolve path

[hamidTravix]

I've upgraded storybook in my project using the official document from 6 to 7, and now I face this error for a custom addons.

storybook/addons/register.tsx:3:20: ERROR: Could not resolve "~app/server/helpers/compileLabels/compile"
storybook/addons/register.tsx:4:19: ERROR: Could not resolve "~app/server/helpers/compileLabels/reduce"

Here is my main.ts config file after upgrade:

import dotenv from 'dotenv';
import path from 'path';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import { Configuration } from 'webpack';

dotenv.config({ path: '.env.development' });

const isDevelopment = process.env.NODE_ENV === 'development';
const tsconfig = path.resolve(__dirname, './tsconfig.json');
const configValuesPath = /config[\\/]{1}values\.tsx$/;

module.exports = {
  stories: ['../src/domains/**/*.story.tsx'],

  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
    '@storybook/addon-controls',
    '@storybook/addon-backgrounds',
    'storybook-addon-paddings',
    '@storybook/addon-viewport',
    'storybook-addon-styled-component-theme/dist/preset',
    './addons/register',
  ],

  typescript: {
    check: isDevelopment,
    checkOptions: {
      tsconfig,
      checkSyntacticErrors: true,
      async: false,
    },
  },

  managerWebpack: async (config: Configuration) => ({
    ...config,
    resolve: {
      ...config.resolve,
      plugins: [
        ...(config.resolve?.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve?.extensions,
          configFile: path.resolve(__dirname, './tsconfig.json'), // TODO path
        }),
      ],
    },
    node: {
      ...config.node,
      fs: 'empty',
      net: 'empty',
      child_process: 'empty',
    },
    module: {
      ...config.module,
      rules: [
        ...(config.module?.rules || []),
        {
          test: configValuesPath,
          loader: [
            'babel-loader',
            {
              loader: path.resolve(__dirname, './loader/shell.js'),
              options: {
                script: 'npm run --silent build:config',
              },
            },
          ],
        },
      ],
    },
  }),

  webpackFinal: async (baseConfig: Configuration, { configType }: any) => {
    const isDev = configType === 'DEVELOPMENT';
    const include = [path.resolve(__dirname, '../src'), __dirname];
    const exclude = [
      path.resolve(__dirname, '../src/**/__tests__'),
      path.resolve(__dirname, '../src/config/values.tsx'),
    ];
    const config = {
      ...baseConfig,
      node: {
        ...baseConfig.node,
        __filename: true,
        __dirname: true,
      },
      // Disable optimizations to speed up build
      optimization: {
        minimize: false,
        minimizer: [],
      },
      module: {
        rules: [
          // env has a value of 'DEVELOPMENT' or 'PRODUCTION'
          // You can change the configuration based on that.
          // 'PRODUCTION' is used when building the static version of storybook.
          {
            test: /\.tsx$/,
            include,
            exclude,
            loader: ['cache-loader', 'babel-loader'],
          },
          {
            test: configValuesPath,
            loader: [
              'babel-loader',
              {
                loader: path.resolve(__dirname, './loader/shell.js'),
                options: {
                  script: 'npm run --silent build:config',
                },
              },
            ],
          },
        ],
      },
      watchOptions: isDev ? baseConfig.watchOptions : { ignored: exclude },
    };

    return config;
  },

  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },

  docs: {
    autodocs: true
  }
};

And here is my custom addon:

import labelRegister from '@myCompany/storybook-addon/register';

import compile from '~app/server/helpers/compileLabels/compile';
import reduce from '~app/server/helpers/compileLabels/reduce';

const compileLabels = (response: object, locale: string) =>
  compile(reduce(response), locale);

labelRegister(compileLabels);

And here is my /storybook/tsconfig.json:

{
  "extends": "../tsconfig",
  "exclude": ["node_modules", "../**/__tests__"]
}

And here is my /tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "~app/*": ["src/*"],
      "~storybook/*": ["storybook/*"]
    },
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "newLine": "LF",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "pretty": true,
    "sourceMap": true,
    "inlineSourceMap": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "resolveJsonModule": true,
    "target": "es5",
    "baseUrl": ".",
    "skipLibCheck": true
  },
  "include": [
    "@types/*.d.tsx",
    "e2e/**/*.tsx",
    "src/**/*.tsx",
    "storybook/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

I've also read these issues, but it didn't help:
Storybook add-ons could not be resolved after migrating to v7
Path alias

[SeyyedKhandon]

@shilman Could you please take a look, we have tried many things but couldn't achieve a different result

[valentinpalkovic]

The Storybook manager is no longer built with Webpack. Now it's built with esbuild.
Therefore, it's no longer possible to configure the manager. Esbuild comes preconfigured to handle importing CSS, and images.

If you're currently loading files other than CSS or images into the manager, you'll need to make changes so the files get converted to JS before publishing your addon.

This means the preset value managerWebpack is no longer respected, and should be removed from presets and main.js files.

In your specific case, the path aliases are therefore not setup up and are not respected, although we might soon support path aliases