using ts-loader to run emitDeclarationOnly

Question

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. how ever 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, /* Parse in strict mode and emit "use strict" for each source file. */
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "emitDeclarationOnly": true,
    "lib": ["ESNext", "DOM"],
    "module": "esnext",
    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
    "useDefineForClassFields": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true, /* Enable all strict type-checking options. */
    "strictFunctionTypes": true, /* Enable strict checking of function types. */
    "strictNullChecks": true, /* Enable strict null checks. */
    "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
    "target": "es2015",
    "types": []
    /* Module Resolution Options */
  },
  "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'],
  },
};

score 1 · Answer 1 · answered Feb 05 '22 at 01:45

You can use this plugin to suppress the error message.

/**
 * ts-loader emits an error when no output is generated. This occurs when using Typescript's emitDeclarationOnluy
 * flag. This plugin suppresses that error so that webpack will consider it a clean build.
 */
class EmitDeclarationOnly {
    apply(compiler) {
        compiler.hooks.shouldEmit.tap('EmitDeclarationOnly', (compilation) => this.handleHook(compiler, compilation));
    }
    handleHook(compiler, compilation){
        compilation.errors = compilation.errors.filter((error) => {!error.toString().includes("TypeScript emitted no output for")});
    }
}

Usage:

yourWebpackConfig.plugins = [new EmitDeclarationOnly()];

using ts-loader to run emitDeclarationOnly

1 Answers1