Module build failed (from ./node_modules/ts-loader/index.js): Error: TypeScript emitted no output for - reactjs

Question

**Error**
**ERROR in ./src/app-chat.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for D:\React\kasper\new-kasper\kasper-ui-chat\chat\src\app-chat.tsx.
at makeSourceMapAndFinish (D:\React\kasper\new-kasper\kasper-ui-chat\chat\node_modules\ts-loader\dist\index.js:52:18)
at successLoader (D:\React\kasper\new-kasper\kasper-ui-chat\chat\node_modules\ts-loader\dist\index.js:39:5)
at Object.loader (D:\React\kasper\new-kasper\kasper-ui-chat\chat\node_modules\ts-loader\dist\index.js:22:5)
webpack 5.74.0 compiled with 1 error in 7299 ms**
Webpack
const { merge } = require('webpack-merge');
const Dotenv = require('dotenv-webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const path = require('path');
const singleSpaDefaults = require('webpack-config-single-spa-react');
const override = require('./config-overrides.js');
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: 'app',
projectName: 'chat',
webpackConfigEnv,
argv,
override,
});
return merge(defaultConfig, {
resolve: {
extensions: ['.ts', '.tsx', '.js'],
preferRelative: true,
alias: {
containers: path.resolve(__dirname, 'src/containers'),
components: path.resolve(__dirname, 'src/components'),
layouts: path.resolve(__dirname, 'src/layouts'),
stores: path.resolve(__dirname, 'src/stores'),
hooks: path.join(__dirname, 'src/hooks'),
context: path.join(__dirname, 'src/context'),
assets: path.join(__dirname, 'src/assets'),
helpers: path.join(__dirname, 'src/helpers'),
},
// plugins: [new TsconfigPathsPlugin()],
},
devServer: {
port: 8500,
},
plugins: [
new Dotenv({
path: './.env.development',
}),
new FilterWarningsPlugin({
exclude:
/There are multiple modules with names that only differ in casing/,
}),
],
output: {
path: path.resolve(__dirname, 'build'),
assetModuleFilename: 'assets/[name][ext]',
},
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.(js)x?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(ts)x?$/,
exclude: /node_modules/,
use: 'ts-loader',
},
],
},
});
};
tsconfig.json
{
"extends": "ts-config-single-spa",
"compilerOptions": {
"jsx": "react-jsx",
"declarationDir": "build",
"baseUrl": "./src",
},
"files": ["src/app-chat.tsx"],
"include": ["src/**/*"],
"exclude": ["src/**/*.test*"],
}
.babel
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [["#babel/plugin-proposal-decorators", { "legacy": true }], "inline-react-svg" ]
}
package.json
{
"name": "#app/login",
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --env standalone",
"build": "concurrently yarn:build:*",
"build:webpack": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js,ts,tsx",
"lint:fix": "eslint src --ext js,ts,tsx --fix",
"format": "prettier --write .",
"check-format": "prettier --check .",
"test": "cross-env BABEL_ENV=test jest",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"prepare": "cd .. && husky install",
"coverage": "cross-env BABEL_ENV=test jest --coverage",
"build:types": "tsc"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#babel/preset-typescript": "^7.15.0",
"#babel/runtime": "^7.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#types/js-cookie": "^3.0.2",
"#types/testing-library__jest-dom": "^5.14.1",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.5",
"concurrently": "^6.2.1",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.0.6",
"jest-cli": "^27.0.6",
"json-loader": "^0.5.7",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"ts-config-single-spa": "^3.0.0",
"ts-loader": "^9.4.1",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "^4.3.5",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa-react": "^4.0.0",
"webpack-config-single-spa-react-ts": "^4.0.0",
"webpack-config-single-spa-ts": "^4.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#date-io/moment": "^2.13.1",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#material-ui/pickers": "^3.3.10",
"#mui/material": "^5.10.8",
"#sentry/react": "^6.19.7",
"#sentry/tracing": "^6.19.7",
"#types/jest": "^27.0.1",
"#types/react": "^17.0.19",
"#types/react-dom": "^17.0.9",
"#types/systemjs": "^6.1.1",
"#types/webpack-env": "^1.16.2",
"awesome-phonenumber": "^2.72.0",
"aws-amplify": "^3.3.2",
"aws-amplify-react": "^5.1.9",
"bootstrap": "^5.1.3",
"dotenv-webpack": "^8.0.1",
"eslint-plugin-jest": "^27.1.0",
"eslint-plugin-jest-dom": "^4.0.2",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-testing-library": "^5.7.2",
"firebase": "^8.2.2",
"formik": "^2.2.9",
"formik-material-ui": "^3.0.1",
"formik-material-ui-lab": "0.0.8",
"formik-material-ui-pickers": "0.0.12",
"js-cookie": "^3.0.1",
"logrocket": "^3.0.0",
"logrocket-react": "^5.0.1",
"mobx": "^5.15.6",
"mobx-devtools-mst": "^0.9.22",
"mobx-react": "^6.3.1",
"mobx-react-devtools": "^6.1.1",
"mobx-react-router": "^4.1.0",
"mobx-state-tree": "^3.17.2",
"mobx-utils": "^5.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-password-strength-bar": "^0.4.0",
"react-query": "^3.34.16",
"react-router-dom": "^5.2.0",
"single-spa": "^5.9.3",
"single-spa-react": "^4.3.1",
"yup": "^0.32.11",
"yup-phone": "1.3.1"
},
"types": "dist/app-login.d.ts",
"resolutions": {
"#types/react": "^17.0.2"
}
}

Answer 1

In webpack add :
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.(js)x?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(ts)x?$/,
exclude: /node_modules|\.d\.ts$/, // this line as well
use: {
loader: 'ts-loader',
options: {
compilerOptions: {
noEmit: false, // this option will solve the issue
},
},
},
},
],
},
Usually webpack hangs when declaration is true without creating d.ts files and that causes errors. By default is true so all you need it to set it to false.