TypeScript declaration file in npm package not exporting module correctly

Other Questions NPM
1

I’m building an npm package to use as a foundation for our projects. But I’m stuck with a problem in the type declarations.

My index.d.ts file looks like this:

export * from './src/core';

declare module '*.html' {
    const template: string;
    export default template;
}

The first line works fine. I can access the modules from the core folder. But the HTML module declaration doesn’t work.

Oddly enough, if I put the same code in a custom.d.ts file in my project, the HTML import works great.

Here’s a snippet from my package.json:

{
  "main": "dist/main.bundle.js",
  "module": "./index.js",
  "types": "./index.d.ts"
}

My folder structure is pretty standard. The base package is in node_modules/base, with src/core containing the main code and index.d.ts at the root.

Any ideas why the HTML module declaration isn’t working when it’s in the npm package? How can I fix this?

2

I’ve encountered similar issues with TypeScript declarations in npm packages. One potential solution is to use a triple-slash directive in your index.d.ts file. Try adding this at the top of your index.d.ts:

///

export * from ‘./src/core’;

Then, create a separate html.d.ts file with your HTML module declaration. This approach tells TypeScript to include the HTML declarations when processing your package types.

Another thing to check is your tsconfig.json. Ensure you have ‘typeRoots’ set correctly to include your package’s type declarations. For instance:

{
“compilerOptions”: {
“typeRoots”: [“./node_modules/@types”, “./node_modules/your-package-name”]
}
}

This configuration can help TypeScript locate and process your package’s declarations correctly. If these adjustments don’t work, investigate potential conflicts with other type definitions in your project or its dependencies.

3

I’ve run into this issue before when building npm packages with TypeScript. The problem likely stems from how TypeScript processes declaration files in packages versus local project files.

For npm packages, TypeScript doesn’t automatically apply global declarations from .d.ts files. To fix this, you might need to adjust your package structure slightly.

Try moving your HTML module declaration to a separate file, let’s say ‘html.d.ts’, and then import it in your main index.d.ts like this:

export * from './src/core';
export * from './html';

Then in your package.json, update the ‘types’ field to include both files:

{
  "types": ["./index.d.ts", "./html.d.ts"]
}

This approach worked for me in a similar situation. It tells TypeScript to explicitly include the HTML module declaration when the package is imported.

If that doesn’t solve it, you might need to investigate if there’s any conflict with other type definitions in your project or dependencies. Sometimes, overlapping declarations can cause unexpected behavior.

4

hey runningtiger, have you tried using a triple-slash directive? sometimes that does the trick. add this to ur index.d.ts:

///

then make a separate html.d.ts with ur html module stuff. might solve ur issue without changing the package structure too much. worth a shot!