Add Gatsby compatibility

[NSpehler]

Short description of changes:

Up until now, Wavesurfer.js breaks the build on static site generator, because window is undefined during build.

To fix this, I've slightly changed the Webpack configuration to make Wavesurfer.js compatible with Gatsby (and most likely other static site generators).

I have followed the recommendation of the Webpack documentation at https://webpack.js.org/configuration/output/#outputglobalobject

Setting the globalObject option to this effectively makes the UMD build available on both browsers and Node.js.

We would love to see this merged, and thank you for all of your work on Wavesurfer.js!

Breaking in the external API:

None

Breaking changes in the internal API:

None

Todos/Notes:

Related Issues and other PRs:

See issue #1841

[coveralls]

Coverage remained the same at 80.62% when pulling 7d6fc8a on NSpehler:gatsby-compatibility into 5383e42 on katspaugh:master.

[chrisparton1991]

As long as the change has been verified to work on web, I can't see much danger in this change.

That said, I've never played with these specific parameters before :)

[katspaugh]

Thanks!

[thijstriemstra]

@NSpehler thanks. can you also add a changelog entry?

[NSpehler]

@NSpehler thanks. can you also add a changelog entry?

Should I add it here https://github.com/katspaugh/wavesurfer.js/blob/master/CHANGES.md#340-unreleased in the 3.4.0 release?

[thijstriemstra]

yep!

[NSpehler]

I've just edited the changelog to add this to the 4.0.0 release. Thank you!

[thijstriemstra]

thanks!

[jacobsilver2]

Hey All - I'm working on getting wavesurfer.js to work with a new Gatsby project I'm working on for a client, and am running into the window is not defined error. Here's the output from the console. Any insight would be appreciated! Thx.
PS I'm using wavesurfer-react, but looking at the errors, it seems its coming from wavesurfer.js

3529 | * @return {function} Available requestAnimationFrame function for the browser
3530 | */

3531 | var _default = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
| ^
3532 | return setTimeout(callback, 1000 / 60);
3533 | }).bind(window);
3534 |

WebpackError: ReferenceError: window is not defined

• wavesurfer.js:3531
  node_modules/wavesurfer.js/dist/wavesurfer.js:3531:1

• wavesurfer.js:35
  node_modules/wavesurfer.js/dist/wavesurfer.js:35:1

• wavesurfer.js:3172
  node_modules/wavesurfer.js/dist/wavesurfer.js:3172:1

• wavesurfer.js:35
  node_modules/wavesurfer.js/dist/wavesurfer.js:35:1

• wavesurfer.js:3591
  node_modules/wavesurfer.js/dist/wavesurfer.js:3591:1

• wavesurfer.js:35
  node_modules/wavesurfer.js/dist/wavesurfer.js:35:1

• wavesurfer.js:99
  node_modules/wavesurfer.js/dist/wavesurfer.js:99:1

• wavesurfer.js:102
  node_modules/wavesurfer.js/dist/wavesurfer.js:102:1

• wavesurfer.js:8
  node_modules/wavesurfer.js/dist/wavesurfer.js:8:1

• wavesurfer.js:15
  node_modules/wavesurfer.js/dist/wavesurfer.js:15:2

• createWavesurfer.js:8
  node_modules/wavesurfer-react/dist/utils/createWavesurfer.js:8:42

• WaveSurfer.js:16
  node_modules/wavesurfer-react/dist/containers/WaveSurfer.js:16:48

• index.js:25
  node_modules/wavesurfer-react/dist/index.js:25:43

[joshuaiz]

Getting this same error with Vercel...I can change the file locally as referenced here: #1841

})(window = { devicePixelRatio: 1 }, function() {

^^ but this doesn't work for statically generated deploys.

It seems as if the PR to solve this issue doesn't work or work as intended. Since adding Wavesurfer to my Next.js/Vercel project I'm not able to create a successful build.

Build log:

23:18:03.407  	> Build error occurred
23:18:03.408  	ReferenceError: window is not defined
23:18:03.408  	    at Object../src/util/request-animation-frame.js (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:3399:16)
23:18:03.408  	    at __webpack_require__ (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:35:30)
23:18:03.408  	    at Object../src/util/index.js (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:3046:53)
23:18:03.410  	    at __webpack_require__ (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:35:30)
23:18:03.410  	    at Object../src/wavesurfer.js (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:3459:36)
23:18:03.410  	    at __webpack_require__ (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:35:30)
23:18:03.410  	    at /vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:99:18
23:18:03.410  	    at /vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:102:10
23:18:03.410  	    at webpackUniversalModuleDefinition (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:8:20)
23:18:03.411  	    at Object.<anonymous> (/vercel/workpath0/node_modules/wavesurfer.js/dist/wavesurfer.js:15:3) {
23:18:03.411  	  type: 'ReferenceError'
23:18:03.411  	}
23:18:03.457  	error Command failed with exit code 1.

Can we get a proper fix for this? Thanks!!!

[okletsgo-rivas]

I think there is a problem with SSR in general. There is a window reference that breaks the build also using sveltekit/vite.