TS2307: Cannot find module 'portal/PortalApp' or its corresponding type declarations

[noventiqpb]

I am getting an error TS2307: Cannot find module 'portal/PortalApp' or its corresponding type declarations in the WebPack, React, TypeScript, Micro frontend project.

In the localhost server I am getting error but the **Host **and **Remote **applications are working fine, but due to the mentioned error, "npm run build" is failed in the **Host **application.

I have tried Eslint disable next line and many of Eslint comments, but due to this error, "npm run build" is failing.

Through this line I am getting remote application and getting error for this line

const SupportPortal = React.lazy(() => import("portal/PortalApp")); // GETTING ERROR FOR THIS LINE

Sharing the component where I am getting this error

import React from 'react';
import LayoutDefault from '../../views/layoutDefault';
const SupportPortal = React.lazy(() => import("portal/PortalApp")); // GETTING ERROR FOR THIS LINE

const Index = () => {
    console.log('First');
    return (
        <LayoutDefault>
            <SupportPortal />
        </LayoutDefault>
    )
}
export default React.memo(Index);

webpack.config.js

const dev_app = "portal@http://localhost:8001/remoteEntry.js";

module.exports = {
    // name: 'host',
    entry: path.resolve(__dirname, '..', './src/index.tsx'),
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js'],
        mainFields: ['source', 'module', 'main'],
        modules: [path.resolve('node_modules')],
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            },
            {
                test: /\.(scss|sass|css)$/,
                use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, '..', './build'),
        filename: '[name]_[fullhash].js',
        publicPath: '/',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '..', './public/index.html'),
            favicon: path.resolve(__dirname, '..', './public/images/favicon.ico'),
            showErrors: true,
        }),
        new MiniCssExtractPlugin({
            filename: '[name]_[fullhash].css',
            chunkFilename: '[id].css',
        }),
        new WebpackManifestPlugin({
            writeToFileEmit: true,
        }),
        new ForkTsCheckerWebpackPlugin(),
        new ModuleFederationPlugin({
            name: 'core',
            filename: 'remoteEntry.js',
            remotes: {
                portal : dev_app,
            },
            shared: { ...packageJson.dependencies }
        }),
    ],
};

.eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
  extends: [
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "plugin:eslint-comments/recommended",
    "plugin:react/jsx-runtime",
  ],
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/no-var-requires": "off",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
  ignorePatterns: ["webpack/*"],
};

tsconfig.json

{
    "compilerOptions": {
        /* Basic Options */
        "target": "ESNext" /* Specify ECMAScript target version */,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ] /* Specify library files to be included in the compilation */,
        "allowJs": false /* Allow JavaScript files to be compiled */,
        "skipLibCheck": true /* Skip type checking of declaration files */,
        "esModuleInterop": true /* Enables interoperability between CommonJS and ES Modules */,
        "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export */,
        /* Strict Type-Checking Options */
        "strict": true /* Enable all strict type-checking options */,
        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file */,
        /* Module Resolution Options */
        "module": "esnext" /* Specify module code generation */,
        "moduleResolution": "node" /* Resolve modules using Node.js style */,
        "resolveJsonModule": true /* Include modules imported with .json extension */,
        "isolatedModules": true /* Ensure each file is treated as a separate module */,
        /* JSX Options */
        "jsx": "react-jsx" /* Specify JSX code generation */,
        /* Source Map Options */
        "sourceMap": true /* Generate source maps for better debugging */,
        /* Advanced Options */
        "noEmit": true /* Do not emit compiled files */,
        "incremental": true /* Enable incremental compilation */,
        "declaration": true /* Generate corresponding .d.ts files */,
        "rootDir": "src" /* Specify the root directory of input files */,
        "outDir": "build" /* Specify the output directory */,
        "baseUrl": "./" /* Base directory to resolve non-relative module names */,
        "paths": {
            /* Specify path mapping to resolve modules */
            "@/*": [
                "src/*"
            ],
            "@/components/*": [
                "src/components/*"
            ],
            "@/pages/*": [
                "src/pages/*"
            ]
        },
        "typeRoots": [
            "/global.d.ts",
            "/src/declarations.d.ts",
            "node_modules/@types",
            "types"
        ] /* List of folders to include type definitions from */,
        /* Strict Type-Checking Options */
        "strictNullChecks": true /* Enable strict null checks */,
        "strictFunctionTypes": true /* Enable strict checking of function types */,
        "strictBindCallApply": true /* Enable strict bind, call, and apply methods */,
        "strictPropertyInitialization": true /* Enable strict property initialization */,
        /* Additional Checks */
        "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type */,
        // "noUnusedLocals": true /* Report errors on unused locals */,
        "noUnusedParameters": true /* Report errors on unused parameters */,
        "noImplicitReturns": true /* Report error when not all code paths in function return a value */,
        "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement */,
        /* Experimental Options */
        "emitDecoratorMetadata": true /* Emit design-type metadata for decorated declarations */,
        "experimentalDecorators": true /* Enable experimental support for decorators */
    },
    "include": [
        "*.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "**/*.scss"
    ],
    "exclude": [
        "node_modules",
        "build",
        "dist"
    ] /* Specify files to exclude from compilation */
}