react-wasm-gif-maker
react-wasm-gif-maker copied to clipboard
App not working due to Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined.
Hi, Can you suggest any fix for the aforesaid issue? I am facing the same in one of my react app which also uses ffmpeg. I tried running your app locally but it does not work. Home page shows Loading.
"Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined" is shown in console, execution of js stops at await ffmpeg.load();
PFB screenshot of the issue.
In my case even the js files were not loading, then I switched to
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
log: true
});
Now facing the same issue.
A mentioned here Issue 1 it seems to be a CORS related issue, but I'm not sure how to resolve this in React.
Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.
Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.
You need to run chrome with a flag enabling shared array buffer . It worked for me
Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.
You need to run chrome with a flag enabling shared array buffer . It worked for me
What is the flag and where do I set it ? BTW, I am running with 'Five server' for Code in Firefox v93.0, but I could switch to Chrome if I knew it would work
Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.
You need to run chrome with a flag enabling shared array buffer . It worked for me
What is the flag and where do I set it ? BTW, I am running with 'Five server' for Code in Firefox v93.0, but I could switch to Chrome if I knew it would work
Run this in your command prompt in chrome.exe directory
chrome --enable-features=SharedArrayBuffer
@apoorvpandey0 @ankitsangwan1999 @MikeCernea Check this https://github.com/sagnikghoshcr7/gif-maker
@apoorvpandey0
@sagnikghoshcr7 reference is excellent, but is unfortunately configured with Next.js. It you want the this to be Bootstrapped with Create Snowpack App
, I faced some issues and did the following to overcome the same:
Install snowpack-custom-headers
$ npm i -D snowpack-custom-headers
Modify snowpack.config.js
[snowpack.config.mjs
in my case]
/** @type {import("snowpack").SnowpackUserConfig } */
export default {
mount: {
public: { url: '/', static: true },
src: { url: '/dist' },
},
plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],
routes: [
/* Enable an SPA Fallback in development: */
// {"match": "routes", "src": ".*", "dest": "/index.html"},
],
optimize: {
/* Example: Bundle your final build: */
// "bundle": true,
},
packageOptions: {
/* ... */
},
devOptions: {
/* ... */
open: "none", /* LINE MODIFIED */
},
buildOptions: {
/* ... */
},
plugins: [
[
"snowpack-custom-headers", /* LINE MODIFIED */
{ /* ADDED */
headers: {
// This is just an example, add any headers you need here.
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
},
}, /* BLOCK FOR HEADERS END */
],
],
};
It is quite important to add open: "none"
according to the example here
Hope this helps...
@formula21 Thank you. That fixed it.
Follow up Question: In your example you declare 'plugins' twice. Once at the top containing the default ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv']
and then later below buildOptions. Doesn't the second declaration overwrite the first?
@formula21 Thank you. That fixed it.
Follow up Question: In your example you declare 'plugins' twice. Once at the top containing the default
['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv']
and then later below buildOptions. Doesn't the second declaration overwrite the first?
I am not sure however, it overwrites the same. This is because, this is a smaller part of a big project and this produced no side-effects! But this does not mean it is a good coding practice or standard anywhere keeping duplicate keys. I am going to change stuff before my team spots this.