[Bug] installing on next.js causes error

[chrisgervang]

Describe the bug
Fatal error thrown when importing hubble.gl related to webm-writer running require('fs') in a browser environment.

To Reproduce
Steps to reproduce the behavior:

1. Create a new next.js app
2. npm install [email protected]
3. Import anything from hubble in code
4. npm run dev
5. See error 'webm-writer fs not defined'

Expected behavior
hubble.gl should not throw this error in a browser environment.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version 93

Additional context
The issue is coming from hubble's webm-writer dependency and this line of code:

https://github.com/thenickdude/webm-writer-js/blob/ccec843765a4c8fe2e77b0d808730108de0e4353/src/BlobBuffer.js#L222-L226

[chrisgervang]

This issue is related to thenickdude/webm-writer-js#16 since next.js also uses webpack. The workaround is to modify the webpack config.

Workaround:

Webpack v4
See the quick-start config node.fs: 'empty'

hubble.gl/examples/quick-start/webpack.config.js

Lines 27 to 29 in 6c79406

	node: {
	fs: 'empty'
	},

Webpack v5
This config was changed to resolve.fallback.fs: false, see docs.

next.config.js

module.exports = {
  ...
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Important: return the modified config
    config.resolve = {...config.resolve, fallback: {fs: false}};
    return config
  },
}