Parcel TypeScript Plugin (Parcel 1)

1.0.0 · abandoned · verified Sun Apr 19

parcel-plugin-typescript provides enhanced TypeScript integration for Parcel 1, extending beyond Parcel's native transpiling. Key features include full type checking in a separate process for performance, on-the-fly path mappings based on `tsconfig.json`'s `paths` and `baseUrl` options, and support for custom AST transformers. This plugin aims to offer a comprehensive TypeScript development experience similar to `awesome-typescript-loader` or `ts-loader` in Webpack. The package is currently at version 1.0.0, specifically designed for Parcel 1.x environments. With Parcel 1 no longer actively maintained and superseded by Parcel 2, this plugin is considered unsupported for modern Parcel workflows. There is no ongoing release cadence, and the project repository indicates inactivity since 2019.

Common errors

```
Error: Cannot find module '@path/to/module'
```
cause TypeScript path mappings (e.g., `baseUrl`, `paths` in `tsconfig.json`) are not being correctly applied or resolved by Parcel.

fix Ensure `baseUrl` and `paths` are correctly configured in `tsconfig.json`. Verify that `parcel-plugin-typescript` is installed and that Parcel is discovering the plugin. Also, check for typos in the import paths.
```
TypeScript errors are not displayed during `parcel build` or `parcel watch`.
```
cause The `transpileOnly` option in `parcelTsPluginOptions` is set to `true`, disabling full type checking, or the plugin is not correctly integrated/discovered.

fix Set `"transpileOnly": false` in the `parcelTsPluginOptions` object within your `tsconfig.json`. Confirm that `parcel-plugin-typescript` is listed in your `devDependencies` and Parcel 1.x is installed.
```
Plugin 'parcel-plugin-typescript' was not found.
```
cause Parcel 1.x failed to discover and load the plugin, or the wrong Parcel version is being used.

fix Ensure `parcel-plugin-typescript` is listed in your `devDependencies` or `dependencies` in `package.json`. Confirm you are using Parcel 1.x (e.g., `parcel-bundler` version `^1.9.0`) and not Parcel 2.x.

Warnings

breaking This plugin is designed exclusively for Parcel 1.x. It is not compatible with Parcel 2.x, which has its own significantly improved built-in TypeScript support. Attempting to use this plugin with Parcel 2 will result in build failures or it being ignored.
Fix: For Parcel 2.x, remove `parcel-plugin-typescript` and rely on Parcel's native TypeScript integration, which includes type checking, or consider community plugins specifically designed for Parcel 2.
deprecated The project is no longer actively maintained. The last commit on GitHub was in 2019, coinciding with the shift towards Parcel 2. This means no new features, bug fixes, or security updates will be provided.
Fix: Consider migrating to Parcel 2.x or an alternative bundler with active TypeScript support.
gotcha Angular support, previously mentioned as an upcoming feature or implicitly supported, was moved to a separate plugin, `parcel-plugin-angular`. This plugin does not provide specialized Angular integration.
Fix: If Angular support for Parcel 1 is needed, investigate `parcel-plugin-angular` or migrate to a modern Angular CLI setup that uses Webpack or Vite.
gotcha Type checking can be disabled via the `transpileOnly: true` option in `parcelTsPluginOptions` within `tsconfig.json`. If type errors are not appearing, verify this setting is `false`.
Fix: Ensure `transpileOnly` is set to `false` in your `tsconfig.json` under `parcelTsPluginOptions` to enable full type checking during the build process.

Install

npm install parcel-plugin-typescript npm
yarn add parcel-plugin-typescript yarn
pnpm add parcel-plugin-typescript pnpm

Quickstart

This quickstart demonstrates setting up a basic Parcel 1 project with `parcel-plugin-typescript`. It includes `package.json` with dependencies and scripts, `tsconfig.json` configured for path mappings and plugin options, an `index.html` to load the TypeScript, and example TypeScript files (`index.ts` and `utils/helper.ts`) using path aliases.

{
  "name": "parcel-ts-plugin-example",
  "version": "1.0.0",
  "scripts": {
    "start": "parcel src/index.html --open",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.9.0",
    "parcel-plugin-typescript": "^1.0.0",
    "typescript": "^2.4.0"
  }
}
// package.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  },
  "parcelTsPluginOptions": {
    "transpileOnly": false
  }
}
// tsconfig.json

<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Parcel TS Plugin Example</title>
</head>
<body>
  <h1>Parcel 1 + TypeScript Plugin</h1>
  <div id="app"></div>
  <script src="index.ts"></script>
</body>
</html>

// src/utils/helper.ts
export function getMessage(name: string): string {
  return `Hello from ${name}!`;
}

// src/index.ts
import { getMessage } from '@utils/helper'; // Demonstrates path mapping

const appDiv = document.getElementById('app');
if (appDiv) {
  appDiv.innerHTML = getMessage("Parcel TS Plugin");
}

// Intentionally introduce a type error to show type checking works (if transpileOnly is false)
// const wrongType: number = "this is a string";

console.log(getMessage("console"));

view raw JSON →