843d58425b
This adds the following Node.js core polyfills only when the import is used: - `path` - `stream` - `vm` - `crypto` - `buffer` Fixes #15948 We'll have a separate issue about adding warnings for the usage of these modules in the browser, some polyfills like crypto are quite heavy and generally not needed for most applications (included accidentally through node_modules).
48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
import { Writable } from 'stream'
|
|
import path from 'path'
|
|
import crypto from 'crypto'
|
|
import { Buffer } from 'buffer'
|
|
import vm from 'vm'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export default function NodeBrowserPolyfillPage() {
|
|
const [state, setState] = useState({})
|
|
useEffect(() => {
|
|
let closedStream = false
|
|
|
|
const writable = new Writable({
|
|
write(_chunk, _encoding, callback) {
|
|
callback()
|
|
},
|
|
})
|
|
|
|
writable.on('finish', () => {
|
|
closedStream = true
|
|
})
|
|
|
|
writable.end()
|
|
|
|
setState({
|
|
path: path.join('/hello/world', 'test.txt'),
|
|
hash: crypto.createHash('sha256').update('hello world').digest('hex'),
|
|
buffer: Buffer.from('hello world').toString('utf8'),
|
|
vm: vm.runInNewContext('a + 5', { a: 100 }),
|
|
stream: closedStream,
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (state.vm) {
|
|
window.didRender = true
|
|
}
|
|
}, [state])
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
id="node-browser-polyfills"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(state) }}
|
|
></div>
|
|
</>
|
|
)
|
|
}
|