Handle 'incorrect' import of external dependency?

[Kequc]

Hi thank you for the work on this library.

I'm compiling some code with TypeScript, then using Rollup to pull it all together. TypeScript uses definition files for 3rd party libraries. One of the definition files I'm importing is called Packery.

https://www.npmjs.com/package/%40types%2Fpackery

The library itself exposes a global variable called Packery, ideally the import would look like import Packery from 'Packery'. But the definition file uses a named export. So to get TypeScript to compile the import looks like:

import { Packery } from 'packery'

This causes Rollup to try and use it like so:

(function (packery) {
'use strict';

packery.Packery();

}(Packery));

I want Rollup to treat my import of this external dependency as a simple global. Line 4 would look like Packery();. Is there any way to get Rollup to handle this strange case? What follows is my current attempt at the correct rollup.config.js:

export default {
  entry: './build/main.js',
  format: 'iife',
  dest: './public/main.js',
  external: [
      'packery',
  ],
  globals: {
      'packery': 'Packery',
  }
};

[Rich-Harris]

This sounds like a bug in the type definition file — have you raised an issue with packery or DefinitelyTyped?

[Kequc]

The issue seems to be that TypeScript doesn't handle globals so well. That package for instance may export several functions and there isn't any way to import multiple default exports. The library is intended to be used in the classical way, which is through use of a script tag. You would then have multiple utilities attached to window in your page.

I found a workaround although I'm not sure it's best practice. I created my own src/types folder, created a packery.d.ts there, and import it instead of the base type definitions.

import * as packery from 'packery';
export default packery.Packery;

That way I'm able to import as though it were global:

import Packery from 'types/packery'

Which renders correctly through rollup as long as I define everything.

export default {
  entry: './build/main.js',
  format: 'iife',
  dest: './public/main.js',
  external: [
      'types/packery',
  ],
  globals: {
      'types/packery': 'Packery',
  }
};

[Rich-Harris]

Cool, that sounds like a good workaround. I'll close this issue as there's not sure Rollup can do anything to help with edge cases like these — thanks