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
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 */
}
Please help, how I can fix this error. Is there any eslint comment for this error.