The compilation of the module has failed due to an error: Typescript did not produce any output

Whenever I attempt to compile a .ts file, I encounter the following error:

Module build failed: Error: Typescript emitted no output for C:\xampp\htdocs\node-api\src\js\server.ts. 
at successLoader (C:\xampp\htdocs\node-api\node_modules\ts-loader\dist\index.js:39:15)
at Object.loader (C:\xampp\htdocs\node-api\node_modules\ts-loader\dist\index.js:21:12)

My compilation process is based on the following configuration files.

Webpack setup:

const path = require( 'path' ),
    CleanWebpackPlugin = require( 'clean-webpack-plugin' );

module.exports = env => {
    return {
        mode: env.dev ? 'development' : 'production',
        entry: {
            'server': './src/js/server.ts'
        },
        output: {
            path: __dirname,
            filename: './dist/js/[name].js',
        },
        externals: '/node_modules',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: ['/node_modules/', '/src/scss/'],
                    use: [
                        'babel-loader'
                    ]
                },
                {
                    test: /\.ts(x?)$/,
                    exclude: ['/node_modules/', '/src/scss/'],
                    use: [
                        'babel-loader',
                        'ts-loader',
                    ]
                },
                {
                    test:  /\.json$/,
                    loader: 'json-loader'
                },
            ]
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js' ],
            alias: {
                '@': path.resolve(__dirname, './src/js')
            }
        },
        plugins: [
            new CleanWebpackPlugin(['./dist/js', './dist/css']),
        ]
    }
};

Typescript specifications:

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "outDir": "./dist/js",
        "target": "es5",
        "moduleResolution": "node",
        "module": "es2015",
        "lib": [
            "es2015",
            "es2016"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

Babel configurations:

{
    "presets": [
        [
            "env", {
                "targets": {
                    "node": "current"
                }
            }
        ],
        "stage-2", "es2015"
    ],
    "plugins": ["dynamic-import-node"]
}

In line with recommendations in similar queries, I have already adjusted the order of resolve extensions (.js before .ts) without success. My environment comprises Typescript 2.8.3, Node 8.11.1, Mongoose 5.0.15, and Webpack 4.6. Any insights on resolving the mentioned error would be greatly appreciated.

Answer №1

To resolve this issue, ensure that the noEmit option in your tsconfig.json is set to false. By default, it is set to true, but changing it to false can help avoid this error.

"noEmit": false

Answer №2

Modify the compilerOptions in your webpack configuration file to customize it specifically for use with the ts-loader:

    rules: [
      {
        test: /\.[jt]s$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              compilerOptions: {
                noEmit: false,
              },
            },
          },
        ],
      },
    ]

Answer №3

I encountered a situation where I needed to delete the line

"emitDeclarationOnly": true
from my tsconfig.json

(or simply change it to false)

When this option is enabled, only d.ts files are generated without any JavaScript output.

For more information, you can check out: https://www.typescriptlang.org/tsconfig#emitDeclarationOnly

Answer №4

By utilizing webpack 5 in conjunction with Typescript 4.5, I am able to successfully launch an expressjs + prisma server using the following setup:

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              compilerOptions: {noEmit: false},
            }
          }
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

tsconfig.json:

{
  "compilerOptions": {
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Source: https://webpack.js.org/guides/typescript/

Answer №5

It has been pointed out by others that setting "noEmit": false can resolve this issue. The reason behind this is that ts-loader depends on tsc’s emit for its functionality. If noEmit is used in the tsconfig.json file, ts-loader will not receive anything and will result in an error.

Nevertheless, using "noEmit": false may lead to other consequences when utilizing allowImportingTsExtensions or generating .d.ts files in your outDir unintentionally.

An alternative solution that does not require changing the noEmit value is to first perform type-checking without emitting any output, and then compile with emits in two separate steps. This can be easily achieved by employing the Fork TS Checker Webpack Plugin, which also enhances TypeScript type checking speed by offloading it to a separate process :

  1. npm install --save-dev fork-ts-checker-webpack-plugin
  2. In webpack.config.js :
    // webpack.config.js
    const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
    
    module.exports = {
      // ...
      plugins: [new ForkTsCheckerWebpackPlugin()],
    };
    

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when s ...

Deactivating the RouterLinkActive attribute based on certain conditions

When working with this straightforward menu item component: import { Component, Input } from '@angular/core'; @Component({ selector: 'nav-item', template: ` <a [routerLink]="routeUrl" routerLinkActive="active-link" ...

Tips and tricks for sending data to an angular material 2 dialog

I am utilizing the dialog box feature of Angular Material2. My goal is to send data to the component that opens within the dialog. This is how I trigger the dialog box when a button is clicked: let dialogRef = this.dialog.open(DialogComponent, { ...

Is it possible for ngModelChange to function with a custom form control?

Suppose I want to create a custom form control. Is it possible to achieve this? <custom-control [ngModel]="myModelVariable" (ngModelChange)="modelHasChanged($event)"></custom-control> I've successfully implemented [(ngModel)] with all th ...

Error Encountered during Compilation of React TypesIs this okay

Currently, I am working on an MVC project that involves the use of TypeScript. To access the types required for this project, I have also integrated React. To obtain the React types, I performed an npm install --save-dev @types/react (similarly for react-d ...

Retrieving data from a JSON using Typescript and Angular 2

Here is an example of what my JSON data structure looks like: { "reportSections": [ { "name": "...", "display": true, "nav": false, "reportGroups": { "reports": [ { "name": "...", "ur ...

The system encountered a TypeError: Unable to access the 'nativeElement' property as it is undefined

Hello, I am a beginner in Angular 2 and currently working on an image cropping plugin. My goal is to display the image on a canvas element. Below is my HTML code: <div class="row"> <div class="col-sm-6"> <canvas id="layout" width="40 ...

Transferring a JSON file between components within Angular 6 utilizing a service

I have been facing an issue in passing the response obtained from http.get() in the displayresults component to the articleinfo component. Initially, I used queryParams for this purpose but realized that I need to pass more complex data from my JSON which ...

Retrieving the latest status array by index using Typescript in Angular

Need help with this code logic. I am working on an array and function : import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.compon ...

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

Merge two input fields into one to send data to the backend

I have created two input fields, one for selecting a date and the other for entering a time. Before submitting the form to the backend, I need to combine these two inputs into one variable. For example, <input type="text" name="myDate"> and <input ...

Why hasn't the variable been defined?

Why am I receiving an error message saying "test is not defined" in this code? Even though I have properly defined the variable in another service file, it seems to be causing issues here. Any insights on what could be going wrong? import { Injectable } f ...

Starting a map in typescript

When attempting to initialize the following Map in typescript, I noticed that it appears empty when printed out. let map: Map<string, object> = new Map<string, object> ([ [ "api/service/method", { uriPath: {} ...

"Enhancing your coding skills: Implementing Typescript in your Redux

Below are the various types of action creators available: export type Calculation = { type: string; }; export type AddAndSubtract = { type: string; value: number; }; export type GetUserInput = { type: s ...

What is the best way to send a user-provided input to my cloud function?

Currently, I am delving into the realm of Cloud Functions for Firebase and have successfully implemented an auth trigger by following a tutorial. However, I am now facing a challenge in passing the username that the user desires to use to my auth event. ...

``Manipulate data structures from rows to columns with RxJS in a TypeScript or JavaScript environment

Here is some table data that I have: date value 01/01/2000 1 01/02/2000 2 01/01/2001 2 01/01/2002 1.5 01/02/2002 1.6 [{date: "01/01/2000", value: "1"},{date: "01/02/2000", value: "2"},{date: " ...

ResizableBox is failing to render any content

My current project involves trying out react-resizable. Unfortunately, my basic example only shows the text XYZ in the browser without displaying any resizable box as expected. There are no error messages either. import { ResizableBox } from 'react-re ...

Utilizing generic union types for type narrowing

I am currently attempting to define two distinct types that exhibit the following structure: type A<T> = { message: string, data: T }; type B<T> = { age: number, properties: T }; type C<T> = A<T> | B<T>; const x = {} as unkn ...

Encountering TypeError during build on Next.js functions integrated with Mongoose

Encountering TypeError in the next build when trying to call model functions for methods and/or statics from pages/api. The error message tends to mention either property does not exist or expression is not callable. I have followed Mongoose Typescript ...

What is the proper syntax for specifying a specific field in a generic class?

type Specific = {field: 'add'} | {field:'remove'}; function add(value: Specific) {} // Ensures value.field === 'add' function remove(value: Specific) {} // Ensures value.field === 'remove' How can I restrict functi ...