CODEWITHSUNDEEP
javascripttypescriptnode-modulesrollupjs
Jesse Good
Jesse Good

Reputation: 52365

How to import js module when Typescript declaration file is located in a separate directory?

Question: When I run npm run build with the configuration below, rollup.js is unable to resolve the dependency (import) and displays the following message below. Is there any way to make rollup happy while also referencing the Typescript declaration file?

Message from rollup:

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
pdfjs-dist/types/web/ui_utils (imported by index.ts)

Here is my index.ts:

import { RendererType } from 'pdfjs-dist/types/web/ui_utils'

const renderType = RendererType.CANVAS;

My package.json:

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.2.1",
    "@rollup/plugin-typescript": "^8.3.2",
    "pdfjs-dist": "^2.13.216",
    "rollup": "^2.70.2",
    "typescript": "^4.6.4"
  }
}

My rollup.config.js:

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default [
    {
        input: 'index.ts',
        output: {
            format: 'es',
            file: 'index.js'
        },
        plugins: [
            typescript(),
            nodeResolve({ browser: true })
        ]
    }
]

Here are the exact steps to reproduce the error above:

  1. Create an empty folder and then run npm -y init

  2. Run the following command:

    npm install typescript pdfjs-dist rollup @rollup/plugin-node-resolve @rollup/plugin-typescript --save-dev

  3. Add "build": "rollup --config" to your package.json

  4. Create the rollup.config.js file shown above

  5. Run npm run build in the terminal

More background:

Now, I should point out that the file pdfjs-dist/types/web/ui_utils is a typescript declaration file (ui_utils.d.ts). The actual js file is in pdfjs-dist/lib/web. If I copy the typescript declaration file so that it is located in the same directory as the js file, dependency resolution works. However, since I will be writing a wrapper around pdf js, I would have to do this for every typescript declaration file which is very tedious and upgrading would also become an issue. So another way to word the question would be how to resolve a module *.d.ts when the js file is located in another directory?

Upvotes: 1

Views: 4008

Answers (1)

Jesse Good
Jesse Good

Reputation: 52365

I came up with the following solution to the problem.

Create a d.ts with the following and name it the same as the module name (ui_utils.d.ts in my case)

declare module 'pdfjs-dist/lib/web/ui_utils' {
    export * from 'pdfjs-dist/types/web/ui_utils'
}

Using the above, now I can reference the actual location of the module and Typescript will pick up the declarations as well.

import { RendererType } from 'pdfjs-dist/lib/web/ui_utils'

Side note: When using rollup, you may also need to use @rollup/plugin-commonjs to be able to resolve dependencies.

Upvotes: 4

Related Questions