typescriptwebpackts-loader

Does 'ts-loader' require 'typescript' to be installed inorder to work? For me it worked fine


The npm documentation for using ts-loader suggests installing typescript and so does the official Typescript guide in webpack documentation without actually providing any reasoning behind it. For me, the everything is getting build successfully without typescript being installed. What did I miss?

My current setup:

webpack.config.js

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // mode: 'development',
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader'
            }
        ]
    },
    output: {
        filename: "bundle.js",
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new webpack.ProgressPlugin()
    ]
}

package.json

{
  ...
  "scripts": {
    "webpack": "webpack",
    "build:dev": "npm run webpack -- --mode development",
    "start": "npm run webpack serve -- --mode development"
  },
  "author": "ranemihir",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.3",
    "ts-loader": "^9.4.4",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

output:

asset bundle.js 1.3 KiB [compared for emit] (name: main)
asset index.html 233 bytes [compared for emit]
./src/index.ts 111 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 2099 ms

Solution

  • As you can see in their package.json, typescript is marked as a peer dependency.

    Prior to npm v7, peer dependencies were not automatically installed, and you would get an error if your package wouldn't depend on TypeScript. Since npm v7, peer dependencies are automatically installed. Apparently you are using npm version 7 or higher, so TypeScript will be installed.

    Nevertheless I would recommend you to add typescript to your project's dependencies. ts-loader will install always the latest version of TypeScript (note the "*"). Whenever TypeScript releases a new version with breaking changes, it would be installed in your project. So if someone opens the projects after some time and runs npm install, there is a good chance that the build is broken.