Typescript definition issue about clipboard-copy HOT 9 CLOSED

The vast majority of the code on Npm uses module.exports = ... and the correct way to import them are import ... = require('...'). Depending on how you have configured TypeScript or your bundler it might work with import ... from '...' also...

When I'm using import copyToClipboard from 'clipboard-copy' I'm getting:

index.ts:1:8 - error TS1192: Module '"/private/tmp/djaskd/node_modules/clipboard-copy/index"' has no default export.

1 import copy from 'clipboard-copy'
         ~~~~


Found 1 error.

If I pass --esModuleInterop to tsc it works. Do you have esModuleInterop in your tsconfig?

You can also see the difference in the output:

import copy from 'clipboard-copy'
copy('test')

becomes:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var clipboard_copy_1 = __importDefault(require("clipboard-copy"));
clipboard_copy_1["default"]('test');

whilst,

import copy = require('clipboard-copy')
copy('test')

becomes

var copy = require("clipboard-copy");
copy('test');

In both cases the typings works correctly for me...

from clipboard-copy.

@gfx that wouldn't make a difference since in that case, we would do export = function clipboardCopy (text) { ... } to maintain compatibility with the current ecosystem.

Until ES modules become stable and widely used in Node.js I think that we'll stick with CommonJS style ☺️

from clipboard-copy.

How are you importing the module? The following works for me:

import copy = require('clipboard-copy')

copy('test')

from clipboard-copy.

from clipboard-copy.

Just like so:

import copyToClipboard from 'clipboard-copy';

and the code works fine. Actually, I've never had to use import / require structure with any other library.

from clipboard-copy.

Actually, I wasn't aware of esModuleInterop. As you said, if I enable it then it works fine. I'm just wondering why all the other libraries work without it and I've never had to use import ... = require() anywhere.

Some CommonJS libraries are imported in the following way though: import * as React from 'react'. Anyway, I'm not sure if it's a misuse on my side or the types could be improved to be more universal but I believe I'm not the last who comes across this issue. If there's nothing you can do, feel free to close the issue.

I'm using babel-typescript and here's my tsconfig:

{
  "module": "es2015",
  "compilerOptions": {
    "lib": ["dom", "es2015", "es2016", "es2017"],
    "baseUrl": "./src/",
    "jsx": "react",
    "target": "es5",
    "strict": true,
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "strictBindCallApply": true
  }
}

from clipboard-copy.

Here are some more info on it: https://github.com/DefinitelyTyped/DefinitelyTyped#a-package-uses-export--but-i-prefer-to-use-default-imports-can-i-change-export--to-export-default

I don't believe that there is anything we can do to make this work from our side (apart from making it an ES module which would be a breaking change).

Do you have any example of other packages that work? As far as I know, it would actually be a bug if it worked...

from clipboard-copy.

How about migrating the code to TypeScript?

from clipboard-copy.

Sorry for the late reply. I think we can close the issue, it's been a long time and esModuleInterop is actually recommended to be turned on so that solves any import issues.

from clipboard-copy.