CODEWITHSUNDEEP
typescripttypescript-typingsrollupjs
sonovice
sonovice

Reputation: 831

Import js file in TypeScript without bundling it with Rollup

I have a simple TypeScript + Rollup configuration, see minimal working example here.

The folder structure is as follow:

src/mwe.ts
vendor/verovio.js    <-- library, that I would like to use
vendor/verovio.d.ts  <-- content (for now): declare module 'verovio'

Now I am trying to use verovio.js inside my mwe.ts:

import * as verovio from '../vendor/verovio.js'

export default class DummyClass {
  constructor() {
    let foo: any = new verovio.toolkit()
  }
}

My goal is to have the js library simply copied into the dist folder instead of bundled into my own library when executing the js compiler and Rollup. I simply don't unterstand how to do it. The problem here consists of two things, as far as I can see:

  1. The type definition is not processed correctly: error TS2306: File '[...]/mwe/vendor/verovio.d.ts' is not a module.
  2. Rollup does not know how to handle the js file properly.

Upvotes: 1

Views: 979

Answers (1)

Christian
Christian

Reputation: 61

You are trying to load a file as a module. Rather than specifying the JS file directly you should make the .d.ts file known to the compiler (e.g. via tsconfig.json or directly via import) and simply import the module afterwards.

import '../vendor/verovio';
import * as verovio from 'verovio';

export default class DummyClass {
  constructor() {
    let foo: any = new verovio.toolkit()
  }
}

I sent you a pull request at https://github.com/sonovice/mwe-ts-verovio-import/pull/1 that does this and also updates the typings as per documentation of the vendor library. I also edited the Rollup config to copy the vendor library though this is not ideal since your lib will not require() the vendor lib. It would be better to specify this as a dependency and let the module loader take care of the require().

Upvotes: 1

Related Questions