Typescript implementation doesn't work with individual modules

[benjamind]

trafficstars

Expected behavior

You should be able to import the parts of the library individually and types should work. Unfortunately due to the way the types packages are defined this doesn't currently function. I believe also the current module structure expects a certain layout in the node_modules folders which means this project doesn't work with alternative node_module package managers like pnpm or yarn workspaces.

https://stackblitz.com/edit/typescript-ff3ss5?file=index.ts

Importing using this form:

import '@interactjs/actions/drag';
import interact from '@interactjs/interact';

Actual behavior

Assuming you're using npm, then the above will result in a typescript error: Could not find a declaration file for module '@interactjs/interact'

This is because the @interactjs/interact package does not actually define a types field and the index.js has no adjacent index.d.ts in the shipped package.

If you're using pnpm or other package managers that don't necessarily put all the scoped packages adjacent to each other, then the form of import used in the @interactjs/interact/index.js will cause issues:

import { Scope } from "../core/scope.js";

This makes the assumption that the @interactjs/interact module is adjacent and findable through the relative module resolution here. Which is not guaranteed to be the case, the correct import would be import { Scope } from '@interactjs/core'.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[andreasvirkus]

bump

[Pokerkoffer]

I am experiencing the Same issue with Typescript v 4.2.2

[taye]

Installing @interactjs/types should fix this.

[Pokerkoffer]

That package is installed, and that does not fix it.

[dren0r123]

You can use for a while const interact = require('@interactjs/interact').default; it works

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Pokerkoffer]

not stale

[amireldor]

Following :)

[taye]

The situation is improved with the latest version. You shouldn't need to install or import @interactjs/types.

[Vexcited]

Still have the issue with "typescript": "^4.9.4" and "@interactjs/interact": "^1.10.17"

In my file, I imported like this:

import "@interactjs/auto-start";
import "@interactjs/actions/resize";
import "@interactjs/modifiers";

import interact from "@interactjs/interact";

and then used like this

interact(windowRef).resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    margin: 12,

    listeners: {
      move: (event) => {
        // some code
      }
    },

    modifiers: [
      // keep the edges inside the parent
      interact.modifiers.restrictEdges({
        outer: "parent"
      }),
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
      })
    ]
  });

and I get these TS errors:

Property 'resizable' does not exist on type 'Interactable'.
Property 'modifiers' does not exist on type 'InteractStatic'.
Property 'modifiers' does not exist on type 'InteractStatic'.

Here is the dependencies I have in my package.json if it can help.

{
  "dependencies": {
    "@interactjs/actions": "^1.10.17",
    "@interactjs/auto-start": "^1.10.17",
    "@interactjs/core": "^1.10.17",
    "@interactjs/interact": "^1.10.17",
    "@interactjs/modifiers": "^1.10.17",
    "@interactjs/utils": "^1.10.17"
  },
  "devDependencies": {
    "@interactjs/types": "^1.10.17",
    "@types/node": "^18.11.16",
    "typescript": "^4.9.4"
  }
}

[evoactivity]

I seem to have my environment (TS 4.9.5, PNPM 7.30.3) working, though not ideally. It requires patching the types package, it's fairly straight forward so should be simple to upstream.

Package Order

@interactjs/types is needed and the import order is important. Interact should come first. Also @interactjs/core must be installed for types to work.

//...modules you want
import interact from "@interactjs/interact";
import '@interactjs/types'; // has to be after importing interact

PNPM issues

With a bit of poking I found if I edit the imports in @interactjs/types then it works with the pnpm symlinked structure.

• run pnpm patch @interactjs/types
• Update imports from

export * from "../core/types.js";

to

export * from "@interactjs/core/types.js";`

• commit patch
• Have working types!

[DaniGuardiola]

In the latest version as of today, the modifiers key in .draggable({ }) (DraggableOptions) is not declared in the types, but works as expected in runtime. Seems like there's some module augmentation missing for this specifically. @interactjs/modifiers is properly installed and imported in the same module. cc @taye fyi