Plugin types aren't being recognized in a Next.js project

[corysimmons]

I can see they exist in node_modules

I've also tried installing @types/wavesurfer.js and declaring module declarations, but I must be messing something up because it keeps failing to find the types.

They are ultimately .ts files so I assume my tsconfig would be able to find them:

They seem to just work on the JS example:

So I'm just not sure why they aren't working in a Next.js project.

[katspaugh]

You shouldn't install @types/wavesurfer.js, it's only for the pre-TypeScript versions (v6 and lower).

Do you have the wavesurfer.js package installed as well or only @wavesurfer/react?

[corysimmons]

If I add this to my tsconfig it works and I get the types:

"baseUrl": ".",
"paths": {
  "wavesurfer.js/dist/plugins/regions.esm.js": [
    "node_modules/wavesurfer.js/dist/plugins/regions"
  ]
}

[corysimmons]

I think maybe whatever glob path thing they're using to parse package.json needs all the file extensions on exports.

Doesn't work:

"exports": {
  ".": {
    "import": "./dist/wavesurfer.esm.js",
    "types": "./dist/wavesurfer.d.ts",
    "require": "./dist/wavesurfer.cjs"
  },
  "./dist/plugins/*.js": {
    "import": "./dist/plugins/*.esm.js",
    "types": "./dist/plugins/*.d.ts",
    "require": "./dist/plugins/*.cjs"
  },
  "./plugins/*": {
    "import": "./dist/plugins/*.esm.js",
    "types": "./dist/plugins/*.d.ts",
    "require": "./dist/plugins/*.cjs"
  },
  "./dist/*": {
    "import": "./dist/*"
  }
}

Works:

"exports": {
  ".": {
    "import": "./dist/wavesurfer.esm.js",
    "types": "./dist/wavesurfer.d.ts",
    "require": "./dist/wavesurfer.cjs"
  },
  "./dist/plugins/*.js": {
    "import": "./dist/plugins/*.esm.js",
    "types": "./dist/plugins/*.d.ts",
    "require": "./dist/plugins/*.cjs"
  },
  "./plugins/*": {
    "import": "./dist/plugins/*.esm.js",
    "types": "./dist/plugins/*.d.ts",
    "require": "./dist/plugins/*.cjs"
  },
  "./dist/*": {
    "import": "./dist/*"
  },
  "./dist/plugins/*.esm.js": {
    "import": "./dist/plugins/*.esm.js",
    "types": "./dist/plugins/*.d.ts",
    "require": "./dist/plugins/*.cjs"
  }
}

Notice how you were doing ./dist/plugins/*.js and adding the .esm.js fixed it ./dist/plugins/*.esm.js

[katspaugh]

True, the way those exports are currently specified the import should probably be “regions.js” instead of “regions.esm.js”.

[corysimmons]

#3533