[Bug]: 8.0.0-alpha.4 broke stories that use ag-grid-react

[joshwooding]

Describe the bug

When loading stories using ag-grid-react you get the following error:

To Reproduce

https://stackblitz.com/edit/github-shgzvb?file=src%2Fstories%2Fdata.ts

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/addon-interactions: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/addon-links: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/addon-onboarding: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/blocks: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/react: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/react-vite: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    @storybook/test: ^8.1.0-alpha.1 => 8.1.0-alpha.1 
    storybook: ^8.1.0-alpha.1 => 8.1.0-alpha.1

Additional context

This is because ag-grid-react uses react-dom/server: https://github.com/ag-grid/ag-grid/blob/efc1ab73566f0e541ce30c44ba3fb1ff1e0ab903/packages/ag-grid-react/src/shared/reactComponent.ts#L6

Which is being resolved to react-dom-server.node.development.js

var stream = require('stream');
...
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}

var ReactMarkupReadableStream = /*#__PURE__*/function (_Readable) {
	_inheritsLoose(ReactMarkupReadableStream, _Readable);

_Readable is stream.Readable which is a node API so it undefined in a browser which means superClass.prototype throws the error.

react-dom/server is being resolved to the node version because of the vite dedupe plugin https://github.com/storybookjs/storybook/blame/dfa09c483863353212b1125a4091ef4a4878c7df/code/addons/docs/src/preset.ts#L143-L162

I have confirmed this by removing it by adding:

    const fixedConfig = {
      ...config,
      plugins: config.plugins?.filter(
        (plugin) => plugin?.name !== "storybook:package-deduplication"
      ),
    };

[valentinpalkovic]

Pinging @JReinhold, because you might have the most context!

[j0k3r]

We do have a similar problem while migrating from version 7.
Rendering is broken with an error superClass is undefined.

It's tied to the same snippet as yours.

        function _inheritsLoose(subClass, superClass) {
          subClass.prototype = Object.create(superClass.prototype);
          subClass.prototype.constructor = subClass;
          subClass.__proto__ = superClass;
        }
        var ReactMarkupReadableStream = function(_Readable) {
          _inheritsLoose(ReactMarkupReadableStream2, _Readable);
          function ReactMarkupReadableStream2() {
            var _this;
            _this = _Readable.call(this, {}) || this;
            _this.request = null;
            _this.startedFlowing = false;
            return _this;
          }
          var _proto = ReactMarkupReadableStream2.prototype;
          _proto._destroy = function _destroy(err, callback) {
            abort(this.request);
            callback(err);
          };
          _proto._read = function _read(size) {
            if (this.startedFlowing) {
              startFlowing(this.request, this);
            }
          };
          return ReactMarkupReadableStream2;
        }(stream.Readable);
        function onError$1() {
        }
        function renderToNodeStreamImpl(children, options, generateStaticMarkup) {
          function onAllReady() {
            destination.startedFlowing = true;
            startFlowing(request, destination);
          }
          var destination = new ReactMarkupReadableStream();
          var request = createRequest(children, createResponseState$1(false, options ? options.identifierPrefix : void 0), createRootFormatContext(), Infinity, onError$1, onAllReady, void 0, void 0);
          destination.request = request;
          startWork(request);
          return destination;
        }

Looks like var destination = new ReactMarkupReadableStream(); is called without parameter, which means when it then calls _inheritsLoose, the second argument _Readable is undefined which is then called superClass. Matching the error message.

We are using renderToStaticMarkup inside some code, that's might be the problem.

[joshwooding]

@j0k3r Yeah, sounds like the problem. Any code/library that uses react-dom/server will probably break.