Trying to use JS libraries in TS

[hushed rover]

I did npm install frappe-gantt and npm install --save @types/frappe-gantt, but I still get the following error:

1 import Gantt from 'frappe-gantt';
         ~~~~~

  node_modules/@types/frappe-gantt/index.d.ts:1:1
    1 export = Gantt;
      ~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.```

Here is my tsconfig.json:
```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "typeRoots": [
      "./node_modules/@types"
    ],
  },
  "include": [
    "src"
  ]
}```

Here is the simple test.ts file I am trying to run:
```ts
import Gantt from 'frappe-gantt';

// Assuming you have a target element in your HTML where the Gantt chart should be rendered
const wrapper = document.createElement('div'); // Create a div for demonstration purposes

// Example tasks array with 'dependencies' property
const tasks = [
  {
    id: 'Task 1',
    name: 'Task 1',
    start: '2024-08-20',
    end: '2024-08-25',
    progress: 20,
    dependencies: '', // No dependencies
  },
  {
    id: 'Task 2',
    name: 'Task 2',
    start: '2024-08-26',
    end: '2024-08-30',
    progress: 50,
    dependencies: 'Task 1', // Depends on Task 1
  },
  // Add more tasks as needed
];

// Initialize the Gantt chart
const gantt = new Gantt(wrapper, tasks);

// Log a simple message to confirm execution
console.log('Gantt chart initialized.');

Here is the index.d.ts for @types/frappe-gantt:

export = Gantt;

declare class Gantt {
    constructor(wrapper: string | HTMLElement | SVGElement, tasks: Gantt.Task[], options?: Gantt.Options);

    change_view_mode(mode: Gantt.viewMode): void;
    refresh(tasks: Gantt.Task[]): void;
}

declare namespace Gantt {
    interface Task {
        id: string;
        name: string;
        start: string;
        end: string;
        progress: number;
        dependencies: string;
        custom_class?: string | undefined;
    }

    interface EnrichedTask extends Task {
        _start: Date;
        _end: Date;
        _index: number;
        invalid?: boolean | undefined;
    }

    interface Options {
        header_height?: number | undefined;
        column_width?: number | undefined;
        step?: number | undefined;
        view_modes?: viewMode[] | undefined;
        bar_height?: number | undefined;
        bar_corner_radius?: number | undefined;
        arrow_curve?: number | undefined;
        padding?: number | undefined;
        view_mode?: viewMode | undefined;
        date_format?: string | undefined;
        custom_popup_html?: string | ((task: EnrichedTask) => string) | undefined;
        language?: string | undefined;
        on_click?: ((task: EnrichedTask) => void) | undefined;
        on_date_change?: ((task: EnrichedTask, start: Date, end: Date) => void) | undefined;
        on_progress_change?: ((task: EnrichedTask, progress: number) => void) | undefined;
        on_view_change?: ((mode: viewMode) => void) | undefined;
    }

    type viewMode = "Quarter Day" | "Half Day" | "Day" | "Week" | "Month" | "Year";

    type viewModeKey = "QUARTER_DAY" | "HALF_DAY" | "DAY" | "WEEK" | "MONTH" | "YEAR";

    const VIEW_MODE: Record<viewModeKey, viewMode>;
}

[rich cape]

!:module

[sly bloom]

sandiford#0

`!sandiford:module`:

"module" in tsconfig today usually refers to your environment rather than the module type you want to use.

If you are using recent versions of Node, use "module": "Node16". This will automatically set "moduleResolution" to the same value, so it's not necessary to set "moduleResolution". To control the module type, in package.json set "type": "module" for ESM or "type": "commonjs" (or don't set "type") for CJS.

For Bun or code that will be bundled before being run, use "module": "preserve".

"type": "commonjs" refers to a pure CommonJS environment without new features like import() and is almost never appropriate.

"type": "ES..." may work in some circumstances e.g. for Deno.

[rich cape]

It works fine here

Also are you running something like tsc aFile.js ?

[hushed rover]

npx tsc src/test.ts

[rich cape]

!:tsc*

[sly bloom]

gerrit0#0

`!gerrit0:tsc-files`:

When you provide tsc with a file like tsc index.ts, TypeScript will ignore your tsconfig.file. TypeScript will compile all of your files as specified by the include option (https://www.typescriptlang.org/tsconfig#include) if you don't provide any files on the command line.

[hushed rover]

if I use import * as Gantt from 'frappe-gantt'; it doesn't throw any errors but the linter goes crazy

[rich cape]

npx tsc is all you should be using most of the time

[hushed rover]

I'm confused why it gives me that error despite having "esModuleInterop": true in config

[rich cape]

read this

[hushed rover]

Still the same problem

[rich cape]

PS C:\Users\Robert\Desktop\frappe> npx tsc

OK

PS C:\Users\Robert\Desktop\frappe> npx tsc src/index.ts
src/index.ts:1:8 - error TS1259: Module '"C:/Users/Robert/Desktop/frappe/node_modules/.pnpm/@[email protected]/node_modules/@types/frappe-gantt/index"' can only be default-imported using the 'esModuleInterop' flag

1 import Gantt from 'frappe-gantt';
         ~~~~~

  node_modules/.pnpm/@[email protected]/node_modules/@types/frappe-gantt/index.d.ts:1:1
    1 export = Gantt;
      ~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.


Found 1 error in src/index.ts:1

Works fine here with your tsconfig

Can you show your command and console output like this?

[hushed rover]

PS C:\Users\golde\Documents\GitHub\monorepo\frontend> npx tsc src/test.ts 
src/test.ts:1:8 - error TS1259: Module '"C:/Users/golde/Documents/GitHub/monorepo/frontend/node_modules/@types/frappe-gantt/index"' can only be default-imported using the 'esModuleInterop' flag

1 import Gantt from 'frappe-gantt';
         ~~~~~

  node_modules/@types/frappe-gantt/index.d.ts:1:1
    1 export = Gantt;
      ~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.


Found 1 error in src/test.ts:1

(base) PS C:\Users\golde\Documents\GitHub\monorepo\frontend> npx tsc src/index.ts
error TS6053: File 'src/index.ts' not found.
  The file is in the program because:
    Root file specified for compilation


Found 1 error.```

[rich cape]

I don't think you are reading anything I am saying

[rich cape]

It is explained here

[rich cape]

and again here

[hushed rover]

do you mean npx tsc without any arguments

[rich cape]

yes

[hushed rover]

(base) PS C:\Users\golde\Documents\GitHub\monorepo\frontend> npx tsc 
(base) PS C:\Users\golde\Documents\GitHub\monorepo\frontend> ```

[rich cape]

yeah that's success

[hushed rover]

hmm but my actual project is in a docker container and I still get the same errors

I am probably running them wrong

I will check

[rich cape]

yep

[hushed rover]

Oh

If I do npx tsc in docker I get this

I figured out the problem

for some reason mounting the node_modules as a volume to the container made it not pick up on the changes for some reason

I built the container without the volume and then it ran with 0 problem

[rich cape]

Ok