Open thachp opened 4 weeks ago
I get the same error when using app-router
, while I'm using 'use client';
and a ClientContext
. But the error doesn't occur for page-router
.
I had the same error
I checked what the cause was, and found the following.
Tldr; it's due to @libp2p/webrtc
having ./dist/src/webrtc/index.js
optimised to ./dist/src/webrtc/index.browser.js
for browser environments. And on app-router
it tries to use index.js
on the browser environment instead of index.browser.js
.
@libp2p "browser" field in a package.json file
Difference between index.js
and index.browser.js
.
export { RTCSessionDescription, RTCIceCandidate, RTCPeerConnection } from 'node-datachannel/polyfill';
//# sourceMappingURL=index.js.map
The index.browser.js
file is a smaller version of index.js
that only includes the functionality needed for the browser (by using Native WebRTC API of the browser from the globalThis object), reducing the overall bundle size.
export const RTCPeerConnection = globalThis.RTCPeerConnection;
export const RTCSessionDescription = globalThis.RTCSessionDescription;
export const RTCIceCandidate = globalThis.RTCIceCandidate;
//# sourceMappingURL=index.browser.js.map
Lastly, Nextjs 14.2 polyfills states that "to reduce bundle size, Next.js will only load these polyfills for browsers that require them", so if index.js
is used the node-datachannel/polyfill
will not be imported, which is the cause of the bug here.
node-datachannel/polyfill
in next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack: (config) => {
config.externals.push('node-datachannel/polyfill');
return config;
},
};
export default nextConfig;
2. Create a way to enforce the use of `index.browser.js` on `@libp2p/webrtc`
@adapole thx for looking into this. you are a life saver!
I have no luck writing a ReactJS Hook for Helia. I keep getting the following errors... Any thoughts?
Repro(s)
// version "helia": "4.2.3", "next": "14.2.3",
Error
Sample Codes