[Question] How to import "wavesurfer.js" with typescript?

[evandrocoan]

I got everything working, i.e., I can load the library and show the wave form and play it.

Just typescript is not happy. I am importing the code with:

import WaveSurfer from 'wavesurfer.js';

But typescript throws: Module '"wavesurfer.js"' has no default export. Did you mean to use 'import { WaveSurfer } from "wavesurfer.js"' instead? ts(2613).

Using the import style typescript is suggesting, breaks the code as I cannot create the Wavesurfer object anymore.

import { WaveSurfer } from 'wavesurfer.js';

How can I make typescript happy?

These are my dependencies:

  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@rollup/plugin-commonjs": "17.1.0",
    "@rollup/plugin-node-resolve": "11.2.0",
    "@rollup/plugin-typescript": "^11.1.1",
    "@testing-library/svelte": "^3.2.2",
    "@tsconfig/svelte": "^4.0.1",
    "@types/node": "^20.2.5",
    "@types/wavesurfer.js": "^6.0.6",
    "autoprefixer": "^10.4.14",
    "babel-jest": "^29.5.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "postcss": "^8.2.8",
    "rollup": "2.41.5",
    "rollup-plugin-livereload": "2.0.0",
    "rollup-plugin-svelte": "7.1.0",
    "rollup-plugin-terser": "7.0.2",
    "svelte": "^3.59.1",
    "svelte-check": "^3.4.3",
    "svelte-jester": "^2.3.2",
    "svelte-preprocess": "^5.0.4",
    "tslib": "^2.5.3",
    "typescript": "^5.1.3"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "5.15.3",
    "@popperjs/core": "2.9.1",
    "@rollup/plugin-alias": "3.1.2",
    "chart.js": "2.9.4",
    "postcss-load-config": "^4.0.1",
    "rollup-plugin-postcss": "^4.0.2",
    "sirv-cli": "^2.0.2",
    "svelte-markdown": "^0.2.3",
    "svelte-routing": "^1.8.9",
    "wavesurfer.js": "^6.6.3"
  }

Other typescript issues:

1. When I try to use wavesurfer.js with React and TypeScript, I get a type error. #2506 When I try to use wavesurfer.js with React and TypeScript, I get a type error.
2. Use TypeScript? #1209 Use TypeScript?

[aburai]

yarn add -D @types/wavesurfer.js

[katspaugh]

@aburai they already have that dependency installed.

I’d recommend upgrading to v7 beta. Then you don’t need the @types package, and it should just work in TypeScript.

[aburai]

aahh, i have overseen the dependency (it is already late here :D )

hmm, maybe something with the tsconfig.json

i look into my wavesurfer jQuery plugin and realize that is still a JS file
for my interface declarations i use
import WaveSurfer, { WaveSurferParams } from 'wavesurfer.js'
but in the JS file
const WaveSurfer = require('wavesurfer.js/dist/wavesurfer')