privatenumber / tasuku

โœ… ใ‚ฟใ‚นใ‚ฏ โ€” The minimal task visualizer for Node.js
MIT License
1.91k stars 30 forks source link

Add esModuleInterop typescript option #6

Closed syeutyu closed 2 years ago

syeutyu commented 2 years ago

Is your feature request related to a problem?

No

Describe the solution you'd like

When I install and use the tasuku library with typscript project I have written code following this library document.

But I faced is not a function error and I founded issue point.

import task from "tasuku"

// it same below code without esModuleExport
const task = require("tasuku").default;

So I printed it and that is undefined.

Describe alternatives you've considered

Of course, it is not an important issue.

But How about the option was left in the readme.md? I think it would be greater before then.

And I'm using this library very useful! thanks ๐Ÿ˜„

Additional context

privatenumber commented 2 years ago

It seems you're reporting a bug but I'm not really sure what you mean.

You're saying importing tasuku in your TypeScript project resolved it to being undefined?

import task from "tasuku"

tasuku === undefined

If so, do you mind sharing your tsconfig.json?

FYI this will not work because it's not an ES module:

const task = require("tasuku").default;
syeutyu commented 2 years ago

I'm sorry for the late reply to your comment.

My tsconfig.json is

{
  "compilerOptions": {
      "module": "commonjs",
      "target": "es2019",
      "noImplicitAny": true,
      "sourceMap": true,
      "outDir": "dst",
      "strict": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "resolveJsonModule": true,
      "noUnusedLocals": true,
      "lib": [
          "es2019",
          "es2020.promise"
      ]
  },
  "exclude": [
      "**/__test__/"
  ],
  "include": [
      "src/**/*"
  ]
}

and then my test ts file is

import task from "tasuku";

console.log(task)

transpiling result is

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tasuku_1 = require("tasuku");
console.log(tasuku_1.default);
//# sourceMappingURL=test.js.map

Typescript version is 4.4.4 Node version is14.17.6

privatenumber commented 2 years ago

Thanks for providing the reproduction details.

I looked into it but I think this is more of a user-land, general, TypeScript configuration issue than a tasuku documentation one (because it can happen with any ESM file importing a CJS module).

It seems the docs recommend using esModuleInterop anytime you're using ESM so you should have that on regardless of whether you're using tasuku.

There also appears to be other solutions too including: import task = require('tasuku').

privatenumber commented 2 years ago

Actually, I found another improvement by exporting the dts via export = task. This gives a warning:

Module '"tasuku@1.0.2/node_modules/tasuku/dist/index"' can only be default-imported using the 'esModuleInterop' flag ts(1259)