using ts-loader to emitDeclerationOnly

currently i am using bable-loader to generate the javascript from typescript. but i want to generate typescript declarations as well.

to solve this originally i simply added tsc --emitDeclarationOnly at the end of our build script. this approach works for building but not for watch

hence i wanted to still use the ts-loader just of emitDeclarationsOnly. however i kept getting the following error

lerna ERR! yarn run build stdout:
$ cross-env NODE_ENV=production webpack --config ./webpack.config.js --mode production
assets by status 122 KiB [cached] 117 assets
./src/index.ts 39 bytes [built]

ERROR in ./src/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for G:\SOMEPATH\src\index.ts.
    at makeSourceMapAndFinish (G:\SOMEPATH\node_modules\ts-loader\dist\index.js:53:18)
    at successLoader (G:\SOMEPATH\node_modules\ts-loader\dist\index.js:40:5)
    at Object.loader (G:\SOMEPATH\node_modules\ts-loader\dist\index.js:23:5)

webpack 5.11.1 compiled with 1 error in 8620 ms
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

my tsconfig is

{
  "compilerOptions": {
    "alwaysStrict": true,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "emitDeclarationOnly": true, // <------ magic
    "lib": ["ESNext", "DOM"],
    "module": "esnext",
    "moduleResolution": "node", 
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true, 
    "useDefineForClassFields": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "strictFunctionTypes": true, 
    "strictNullChecks": true, 
    "strictPropertyInitialization": true, 
    "target": "es2015",
    "types": []
  },
  "exclude": ["node_modules"],
  "files": [
    "./src/index.ts",
    "./src/index.d.ts",
  ]
}

webpack

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  cache: {
    type: 'filesystem',
  },
  devtool: isProduction ? 'source-map' : 'source-map',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        enforce: 'pre',
        exclude: /node_modules/,
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve('eslint-loader'),
            options: {
              eslintPath: require.resolve('eslint'),
            },
          },
        ],
      },
      {
        exclude: /node_modules/,
        use: ['ts-loader'],
      },
      {
        exclude: /node_modules/,
        test: /\.tsx?$/,
        use: ['babel-loader'],
      },
    ],
  },
  output: {
    filename: 'index.js',
    globalObject: 'this',
    library: 'data',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

[thorsent]

Workaround posted here: https://stackoverflow.com/questions/66589942/using-ts-loader-to-run-emitdeclarationonly/70994678#70994678

[appzuka]

@melloc01 , are you seeing the same error as @ZNackasha reported? (Error: TypeScript emitted no output for G:\SOMEPATH\src\index.ts.) The error is coming from webpack. It is reporting that ts-loader emitted no output, which is not surprising as @ZNackasha told it not to produce any output.

This seems a strange use case as it runs ts-loader but then tells it not to produce any Javascript output. I’m also not sure that the webpack config given above is valid. Perhaps you could explain what you expect ts-loader to do in this case and provide a minimal repository demonstrating the issue.