Parcel typescript module augmentation

Question

I'm trying to ship a lib that uses typescript module augmentation with Parceljs but it doesn't seem to bundle those module augmentations. I'm not able to use the properties in the project that import the lib generated with Parcel.

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "devDependencies": {
    "parcel": "latest"
  }
}

Example that I try to ship with Parcel and Typescript augmentation.

import { Components, createTheme, PaletteOptions } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Palette {
    ternary: Palette['primary'];
    quaternary: Palette['primary'];
    gridColor: string;
    logoColor: string;
  }
  interface PaletteOptions {
    ternary?: PaletteOptions['primary'];
    quaternary?: PaletteOptions['primary'];
    gridColor?: string;
    logoColor?: string;
  }
}

export const defaultTheme = createTheme();

My exported defaultTheme that comes from the lib built with Parcel won't be shipped with additional properties that I defined here. I would like them to be available.

Could you provide a simplified reproduction of the library package and how you're consuming it? Two thoughts in the meantime: (1) the example in the typescript docs that shows how module augmentation works seems to show that the consumer of the augmentation would import from two _separate_ files, which runs against the idea of bundling your library code into a single file (e.g. the whole point of parcel). (2) your package.json is missing a `types` field - without it parcel won't generate any `.d.ts` files at all - see [docs](https://parceljs.org/languages/typescript/#generating-typings) — Andrew Stegmaier, Nov 15 '21 at 16:12
I edited my question, types field was defined I just forgot it in my initial message — AdMer, Nov 15 '21 at 17:29

Andrew Stegmaier · Answer 1 · 2021-11-24T15:39:33.083

Unfortunately, it looks like this is a bug in parcel.

Update (2021-11): This PR to fix this bug was accepted. The fix is available in version 2.0.0-nightly.296 and later (link), and should also ship in the next release of @parcel/transformer-typescript-types after 2.0.1. If you're using version 2.0.1 or earlier, read on for a workaround.

You can work around the issue by using tsc to generate the .d.ts files for your project. Here's how you would do that:

Make sure your package.json is configured to tell parcel to output files with the same name as the root source file (e.g. if the root source file is /src/index.ts, make sure that you have "main": "dist/index.js" in your package.json)

Add a tsconfig.json with the following contents:

{
  "compilerOptions": {
    "rootDir": "./src",
    "declaration": true,
    "emitDeclarationOnly": true,
    "outFile": "./dist/index.js",
  }
}

Add a command to your build step that deletes the .d.ts file generated by parcel, and creates a new one with tsc. E.g. parcel build becomes parcel build && rimraf dist/index.d.ts && tsc

I know this isn't pretty, but hopefully it will unblock you.

Here's a repo where you can see an example of both the bug and the workaround.

My [PR to fix this issue](https://github.com/parcel-bundler/parcel/pull/7315) was accepted. The fix is available in the nightly channel - version 2.0.0-nightly.296 and later. It should be available in stable channel in the next release after 2.0.1. — Andrew Stegmaier, Nov 24 '21 at 15:34

Parcel typescript module augmentation

1 Answers1