Uncaught ReferenceError: WaveSurfer is not defined

[RLangridge]

Hi there, I'm trying to run WaveSurfer in an Electron project. I'm using the following:
Node v18.16
Electron v25.2
WaveSurfer v7.0.0-beta.11

When I try to use the annotation plugin (I've installed wave surfer via yarn), I get the following error when I import:

import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js';
Uncaught ReferenceError: WaveSurfer is not defined
This comes from the minified js from the regions plugin. Anyone have any idea what's happening here?

I get the same error when using nupkg

[katspaugh]

It sounds like you forgot to import WaveSurfer?

[RLangridge]

Sorry; I should have said that I had already imported WaveSurfer:
This is in React btw:

import WaveSurfer from 'wavesurfer.js';
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js';
...

const ws = WaveSurfer.create({
container: document.getElementById(wavesurfer-${index}),
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: ${saveLocation}${path.sep}SessionAudio${path.sep}Downloads${path.sep}${file.filename},
});

const wsRegions = ws.registerPlugin(RegionsPlugin.create());

Below is the error:
Uncaught ReferenceError: WaveSurfer is not defined at Object.<anonymous> (G:\Programming\Work\Redenlab\RedenlabAnalyzeManager\node_modules\wavesurfer.js\dist\plugins\regions.min.cjs:1:351) at Object.<anonymous> (G:\Programming\Work\Redenlab\RedenlabAnalyzeManager\node_modules\wavesurfer.js\dist\plugins\regions.min.cjs:2:3) at Module._compile (node:internal/modules/cjs/loader:1269:14) at Module._extensions..js (node:internal/modules/cjs/loader:1324:10) at Module.load (node:internal/modules/cjs/loader:1124:32) at Module._load (node:internal/modules/cjs/loader:965:12) at f._load (node:electron/js2c/asar_bundle:2:13330) at o._load (node:electron/js2c/renderer_init:2:3109) at Module.require (node:internal/modules/cjs/loader:1148:19) at require (node:internal/modules/cjs/helpers:110:18)

[katspaugh]

What bundler are you using? Wepback/rollup?

[RLangridge]

Sorry I'm going to seem like a fool here but I'm using babel and that's about it. electron-builder is doing the build to create the electron app.

[katspaugh]

Awesome, thank you!

[sicklyman]

I also have the same issue. All was working last week on my wordpress install at https://jgsongs.com but today none of the posts display wavesurfer. The console says

and the code I'm using in each post is as follows:

` <script src="https://unpkg.com/wavesurfer.js"></script>
<script>
const playButton = document.querySelector("#playButton")
const playButtonIcon = document.querySelector("#playButtonIcon")
const waveform = document.querySelector("#waveform")
// --------------------------------------------------------- //
/**

• Initialize Wavesurfer
• @returns a new Wavesurfer instance
  */
  const initializeWavesurfer = () => {
  return WaveSurfer.create({
  container: "#waveform",
  responsive: true,
  cursorColor: '#fff',
  waveColor: '#B17435',
  progressColor: '#676767',
  barWidth: 2,
  barRadius: 2,
  cursorWidth: 2,
  height: 70,
  barGap: 1

})
}
// --------------------------------------------------------- //
// Functions
/**

• Toggle play button
  */
  const togglePlay = () => {
  wavesurfer.playPause()
  const isPlaying = wavesurfer.isPlaying()
  if (isPlaying) {
  playButtonIcon.src = "https://jgsongs.com/wp-content/uploads/2023/01/pauseGray.png"
  } else {
  playButtonIcon.src = "https://jgsongs.com/wp-content/uploads/2023/01/playGray.png"
  }
  }

// Create a new instance and load the wavesurfer
const wavesurfer = initializeWavesurfer()
wavesurfer.load("https://jgsongs.com/wp-content/uploads/2023/03/Psalm-45.mp3")

// Javascript Event listeners
playButton.addEventListener("click", togglePlay)

// Resets the play button icon after audio ends
wavesurfer.on("finish", () => {
playButtonIcon.src = "https://jgsongs.com/wp-content/uploads/2023/01/playGray.png"
})
</script>`

Any help appreciated.

[katspaugh]

Sorry about that!
You should use this script tag:

<script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>

[sicklyman]

brilliant! That worked.

Any idea why it worked fine until just this week?

[katspaugh]

Because I released a new version yesterday, v7, that has a different default export. I'm changing it back here: #3008.

Edit: <script src="https://unpkg.com/wavesurfer.js"></script> should also work again now.

[sicklyman]

right... this makes me feel uneasy. From now on, I guess I should use your updated script tag, right? I'm just worried about future updates breaking the plugin. What's the best way to keep up to date with your new releases?

[sicklyman]

wonderful plugin by the way. I should have said that at the start. My apologies!

[katspaugh]

No worries, I totally get the concern.
It’s generally a good idea to pin the version of your CDN scripts, otherwise it will always fetch the latest one which is a bit like a Trojan horse. With the version pinned you can be deliberate about your updates.
So I apologize that the readme in this repo was going against this advice. I’ve updated it now to include a version.
I.e.

<script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>

Hope this makes sense and sorry for the breakage today. Thanks for letting me know btw, your report helped others. Glad we fixed this relatively early.