Compile error with latest version

[qortex]

This compile error started popping up in my Angular project after updating to latest version:

ERROR in src/app/shared/custom-forms/components/inputs-complex/input-emoji/input-emoji.component.ts:3:8 - error TS1259: Module '"/home/mic/dev/qontrol/product/frontend/node_modules/@joeattardi/emoji-button/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    3 import EmojiButton from '@joeattardi/emoji-button';
             ~~~~~~~~~~~
    
      node_modules/@joeattardi/emoji-button/index.d.ts:3:1
        3 export = EmojiButton;
          ~~~~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Playing around with allowSyntheticDefaultImports in my tsconfig.json didn't fix the error.

Typescript doc mentions it's just for type-checking.

Any idea on how to fix that?

[qortex]

I guess it's located in this commit, but don't know much about how types definitions work.

[joeattardi]

Hmm, sorry about that. This was my first time writing TypeScript definition files, I probably made a mistake somewhere.

I will work on figuring out what the right fix is. In the meantime, I tested locally and if you enable the esModuleInterop flag, it should compile. At least, it did for me under TypeScript 3.8.2.

[joeattardi]

So it looks like I did write the declaration file correctly. There are two ways you can consume the library in a TypeScript project:

1. Enable the esModuleInterop flag
2. Import the class like this: import EmojiButton = require('emoji-button');

See https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require for more details.

I will update the documentation to reflect this - didn't know about that. Sorry for any inconvenience!

[joeattardi]

Oops, it looks like I forgot return types for some of my methods in the TypeScript definition file. I'll need to fix that and publish a new release.

[joeattardi]

Just published v2.9.2 which has a few minor fixes in the type declaration file. If you follow the steps above you should be good to go, let me know if you still have problems though! I'll close this for now.

[qortex]

Unfortunately, looks like this format is not enabled in my config because of reasons I'm not so clear with:

ERROR in src/app/shared/custom-forms/components/inputs-complex/input-emoji/input-emoji.component.ts:4:1 - error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
    
    4 import EmojiButton = require('@joeattardi/emoji-button');
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I should put a few hours understanding the modules stuff with TS & JS to understand the underlying reasons.

I don't know how other packages do to be compatible with all possibles compile configs though.

[joeattardi]

Have you tried setting the esModuleInterop flag and just importing it like you normally would? That worked for me when I tested it locally.

[qortex]

Yup, just tried it but it makes other imports in my project fail, for example:

import * as moment from 'moment';
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.
src/app/core/services/intercom.service.ts:42:21 - error TS2349: This expression is not callable.
  Type 'typeof moment' has no call signatures.

[joeattardi]

Can you share your tsconfig.json file?

[qortex]

Sure:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@core/*": ["src/app/core/*"],
      "@shared/*": ["src/app/shared/*"],
      "@environments/*": ["src/environments/*"]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom", "esnext.asynciterable"],
  }
}

[joeattardi]

What if you try this:

import * as EmojiButton from '@joeattardi/emoji-button';

[qortex]

Cool, it works ok. Thanks!

But I thinks there are two problems in the types definitions, so I get compile errors:

on(event: string, callback: () => void): void;

The callback should have one string parameter to be able to write what's in the doc:

picker.on('emoji', emoji => {
    document.querySelector('input').value += emoji;
  });

And the options parameter should be optional since options can be fetched from the constructor supplied options:

showPicker(referenceEl: HTMLElement, options: EmojiButton.Options): void;
  togglePicker(referenceEl: HTMLElement, options: EmojiButton.Options): void;

[joeattardi]

Oops again! 😄 Sorry again about that. I've published version 2.9.4 which hopefully should have the correct typings.

[qortex]

That's great, all green now :) Thanks!

[joeattardi]

Great, I’m glad you’re up and running now. Sorry again for the inconvenience!