wavesurfer.js: Jest error: ReferenceError: self is not defined

In the latest version of the library, we get the following error when using jest:

    ReferenceError: self is not defined

      4 | import { findWithType } from 'react-shallow-testutils';
      5 | import ShallowRenderer from 'react-test-renderer/shallow';
    > 6 | import WaveSurfer from 'wavesurfer.js';
        | ^

This was caused by a change removing globalObject: 'this' from the build config in https://github.com/katspaugh/wavesurfer.js/commit/d27b75e29b16e1b0d425eefa83bd0b0e1891f067.

There is a workaround by setting testEnvironment: 'jsdom' in the jest config, but this causes issues for things in the node environment.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 16 (2 by maintainers)

Most upvoted comments

Did not really work.

Anyone who is looking for a Next.js solution, use the dynamic loader to load your component that contains the wavesurfer import:

import dynamic from 'next/dynamic'

const PodcastPlayer = dynamic(
    () => import('@/components/atoms/PodcastPlayer'),
    { ssr: false }
)

+11

bencehusi on Jan 5, 2022

Same here with Vue/Nuxt

command-tab on Feb 23, 2022

@iandoesallthethings I made it work in Sveltekit by dynamically importing the package in onMount:

	const initProgress = async () => {
		try {
			const waveSurfer = (await import('wavesurfer.js')).default;
			const audio = waveSurfer.create({
				container: `#my-id`,
				waveColor: '#000000',
				progressColor: '#ffffff'
			});
			audio.load(url);
		} catch (error) {
			console.error(error);
		}
	};

	onMount(() => {
		initProgress();
	});

Thanks f-elix for this great tip. Your example works for the basic player but when I tried addding wavesurfer plugins, it doesn’t work. Have you got plugins working? Cheers.

const initProgress = async () => {
	try {
		let WaveSurfer = (await import('wavesurfer.js')).default;
		let audio = WaveSurfer.create({
			container: '#waveform',
    plugins: [
        WaveSurfer.markers.create({
            markers: [
                {
                    time: 5.5,
                    label: "V1",
                    color: '#ff990a'
                },
                {
                    time: 10,
                    label: "V2",
                    color: '#00ffcc',
                    position: 'top'
                }
            ]
        })
  ]
		});
		audio.load('./static/strings.wav');

            audio.on('ready', function () {
              audio.play();
           });
	} catch (error) {
		console.error(error);
	}
};

onMount(() => {
	initProgress();

});

99bits on Mar 16, 2022

This is brilliant, thank you so much! Worked for me in Next.js

frg100 on Nov 1, 2022

并没有真正起作用。

任何正在寻找 Next.js 解决方案的人，使用动态加载器来加载包含 wavesurfer 导入的组件：
import dynamic from 'next/dynamic'

const PodcastPlayer = dynamic(
    () => import('@/components/atoms/PodcastPlayer'),
    { ssr: false }
)

I found the mistake error

    main › ReferenceError: window is not defined
    at /Users/xxx/renderer/.next/server/pages/home.js:197:28
    at Object.<anonymous> (/Users/xxx/renderer/.next/server/pages/home.js:209:10)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at requirePage (/Users/xxx/node_modules/next/dist/next-server/server/require.js:1:1519)
    at loadComponents (/Users/xxx/node_modules/next/dist/next-server/server/load-components.js:1:1442)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.findPageComponents (/Users/xxx/node_modules/next/dist/next-server/server/next-server.js:77:257)
    at async DevServer.renderToHTML (/Users/xxx/node_modules/next/dist/next-server/server/next-server.js:138:542)
    at async DevServer.renderToHTML (/Users/xxx/node_modules/next/dist/server/next-dev-server.js:36:578)
    at async DevServer.render (/Users/xxx/node_modules/next/dist/next-server/server/next-server.js:75:160)

luokunman on Aug 24, 2022

FWIW if you’re just looking to import wavesurfer in a node context (but not run it), you can just shim window and self:

global.self = global;
global.window = {};

This is useful for SSR react components that execute WaveSurfer.create in a useEffect hook.

noslouch on Sep 29, 2021