How Can I Configure Storybook to Use React-App-Rewired?

Question

I'm working on a project that implements react-app-rewired to send headers to the server in order to bypass ReferenceError: SharedArrayBuffer is not defined (I'm getting this error from using the @ffmpeg/ffmpeg library).

// config-overrides.js
const {
  override,
  // disableEsLint,
  // addBabelPlugins,
  // overrideDevServer
} = require('customize-cra')

module.exports = {
  devServer(configFunction) {
    // eslint-disable-next-line func-names
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost)

      // Set loose allow origin header to prevent CORS issues
      config.headers = {
        'Access-Control-Allow-Origin': '*',
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Resource-Policy': 'cross-origin'
      }

      return config
    }
  }
}

// package.json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test  --transformIgnorePatterns \"node_modules/(?!siriwave)/\"",
  "eject": "react-scripts eject",
  "storybook": "start-storybook -p 6006 -s public",
  "build-storybook": "build-storybook -s public"
}

Though this works when I run npm start , meaning the headers get sent to the server, it doesn't work when I run npm run storybook , and I still get the SharedArrayBuffer is not defined error. I'm assuming it's because npm run storybook still uses react-scripts as opposed to react-app-rewired under the hood, but I'm not sure where I can change the configurations for this. Any ideas?

Answer 1

You can add a custom webpack configuration in storybook/main.js like so: https://storybook.js.org/docs/react/builders/webpack

So you can use the same webpack modification as you did with react-app-rewired