ReferenceError: SharedArrayBuffer is not defined

[leo6liu]

Visiting https://ffmpegwasm.github.io/vue-app/ and running a dev server locally both result in a "ReferenceError: SharedArrayBuffer is not defined" error.

I tested with both Firefox 91.0.2 and Chrome 92.0.4515.159.

[anasak-dev]

I ran into sharearraybuffer issue as well, and this seems to fix my issue
Open 'vue.config.js' file and update it as below

const path = require('path');
const express = require('express');

module.exports = {

publicPath: process.env.NODE_ENV === 'production'
? '/vue-app/'
: '/',
configureWebpack: {
devServer: {
before: app => {
app.use('/node_modules/', express.static(path.resolve(__dirname, 'node_modules')))
},
// Add Embedder Policy In order to resolve sharedarraybuffer issue

  headers: {
   
      'Cross-Origin-Embedder-Policy':'require-corp',
   'Cross-Origin-Opener-Policy':'same-origin',
    },
              // Add Embedder Policy In order to resolve sharedarraybuffer issue

}

}
};

After adding restart your app by command 'npm run serve'

Additionally try to open your app with localhost instead of any IP in url I think the localhost format is
supported in this case and example vue app works well after that.

Note: Credit to the guy who posted header values here ffmpegwasm/react-app#3

[dbussert]

this fix does not appear to work any longer

$ npm run serve

> vue-app@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'headers'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           headers: …
         }
       })
      ]

[crunchstefan]

it should still work if you add it to the correct place:

const path = require('path');
const express = require('express');

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-app/'
    : '/',
  configureWebpack: {
    devServer: {
      before: app => {
        app.use('/node_modules/', express.static(path.resolve(__dirname, 'node_modules')))
      },
      headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Opener-Policy': 'same-origin',
      }
    }
  }

};