Overriding webpack ProvidePlugin issue

[ghost]

Hey 👋,
I'm using storybook v6.4.14 and trying to override/extend default storybook webpack plugins. To be more precise I need to add additional definition to ProvidePlugin but seems like it doesn't work as I expect (or maybe I found a bug).

So, my config is following:

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

module.exports = {
  core: {
    builder: 'webpack5',
  },
  framework: '@storybook/react',
  features: {
    babelModeV7: true,
  },
  stories: [
    '../src/**/*.stories.mdx',
  ],
  addons: [
    '@storybook/addon-docs',
  ],
  webpackFinal: async (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        buffer: require.resolve('buffer'),
      },
      fallback: {
        ...config.resolve.fallback,
        buffer: require.resolve('buffer'),
      },
    };

    config.externals = {
      ...config.externals,
      bufferutil: 'commonjs bufferutil',
      'utf-8-validate': 'commonjs utf-8-validate',
    };
    
    // const filteredPlugins = config.plugins
    //   .filter((plugin) => plugin.constructor.name !== 'ProvidePlugin');

    config.plugins = [
      // ...filteredPlugins,
      ...config.plugins,
      new webpack.ProvidePlugin({
        process: require.resolve('process/browser.js'),
        Buffer: ['buffer', 'Buffer'],
      }),
    ];

    return config;
  },
};

In result I always get Buffer is not defined in browser console (some of our packages requires buffer). I've tried to console.log definitions that passed to ProvidePlugin (https://github.com/webpack/webpack/blob/main/lib/ProvidePlugin.js#L28) and there is only process in every case. Also, as you can see in the code I've tried to filter default storybook plugins to get rid of default ProvidePlugin and pass my own custom one.

// console.log of definitions inside ProvidePlugin
DEFINITIONS {
  process: '{ABS_PROJECT_PATH}/node_modules/process/browser.js'
}

Could some1 explain me what I'm doing wrong or is it a bug in storybook? Thanks

CC: @shilman

[bard]

I encountered the same problem. Eventually, I worked around it by leaving webpack's configuration alone and adding this to preview.tsx:

import { Buffer } from 'buffer';

global.Buffer = Buffer;

[ghost]

@bard hm, interesting. I've tried to do the same, but I've added this to one of my files that is entry point in my case and it didn't work. But I'll try your approach, ty.

[ghost]

@bard I can confirm, your solution works, thank you!

[bard]

An additional gotcha:

If other modules imported from preview.tsx rely on Buffer, setting global.Buffer = Buffer within preview.tsx will be too late. Instead, create a workarounds.ts file with the same content as above:

import { Buffer } from 'buffer';

global.Buffer = Buffer;

And make that the first import in preview.tsx:

import './workarounds';
import React from 'react';
// ...

This way, Buffer will be available to all imported modules.

(I came across this when importing MockedProvider from @apollo/client/testing.)

[ghost]

Hm, interesting. I'll keep it in mind, thanks for your research!