Differing transpiled output between React and React Storybook

Current Behavior

Differing transpiled output when serveing (or building) a React application vs serving it via nx storybook.

When consuming code that overrides an accessor/setter from a derived class, the emitted transpiled code works as expected when run via nx serve. However, when consumed within a storybook application via nx storybook, any code that should transpile to be super.name within an accessor body is instead emitted as this.name, resulting in a stack overflow when accessed.

It appears that very different babel transformations are being applied against the two targets – maybe out of necessity – but admittedly babel and the (wonderful) magic that Nx provides in between is a bit too nebulous for me. I’ve attempted various babel configs and tinkered with the plugin source but have not had any luck solving this.

Is it possible to have javascript emitted in a Storybook app that matches the javascript that’d be emitted from the underlying React app? I understand this is likely not an issue directly with Nx, and I sincerely apologize if that’s the case. Many thanks in advance!

Expected Behavior

Identical emitted javascript for a React app when using nx serve and nx storybook.

Steps to Reproduce

You may clone this repo to reproduce: https://github.com/octadecimal/repro-super-transpile

1. Invoke nx serve my-app
   • Observe: Application runs normally expected.
2. Invoke nx storybook my-app
   • Observe: Application throws a runtime exception.

In short:

/**
 * Animal.ts
 */
export class Animal {
  private _name = '';

  public get name(): string {
    return this._name;
  }

  public set name(v: string) {
    this._name = v;
  }
}

/**
 * Cat.ts
 */
export class Cat extends Animal {
  public override set name(v: string) {
    super.name = v;
    console.log(`Meow: ${v}`);
  }
}

import { Cat } from '@repro-super-transpile/my-lib';
import { useEffect } from 'react';

export function App() {
  useEffect(() => {
    const cat = new Cat();
    cat.name = 'CoolCat';
  }, []);

  return <div />;
}

When the above is run via nx serve as a React app, all works as expected. We’re able to set cat.name and receive a console.log.

When the above is run via nx storybook, a stack overflow results, due to super.name being transpiled to this.name.

Failure Logs

(Not from Nx!)

RangeError: Maximum call stack size exceeded
    at Cat.set (http://localhost:4400/main.dc58b424a48e52bd3a39.hot-update.js:35:17)
    at Cat.set (http://localhost:4400/main.dc58b424a48e52bd3a39.hot-update.js:35:17)
    at Cat.set (http://localhost:4400/main.dc58b424a48e52bd3a39.hot-update.js:35:17)
    at Cat.set (http://localhost:4400/main.dc58b424a48e52bd3a39.hot-update.js:35:17)

Environment

   Node : 16.15.1
   OS   : win32 x64
   yarn : 1.22.19

   nx : 14.8.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.8.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.8.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 14.8.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 14.8.3
   @nrwl/js : 14.8.3
   @nrwl/linter : 14.8.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.8.3
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.8.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : 14.8.3
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.8.3
   @nrwl/web : 14.8.3
   @nrwl/webpack : 14.8.3
   @nrwl/workspace : 14.8.3
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

[octadecimal]

Hi @mandarini – many thanks for looking into this. I’m sorry you ran into troubles when attempting to reproduce. I will set up some additional branches – one with storybook configured manually and one with CRA – later in the week.

When you say “storybook installed and configured manually”, what do you mean?

I manually installed storybook within my existing Nx workspace via npx storybook init and then configured it by hand (.storybook/main.js, etc)

How do you invoke Storybook in that case?

start-storybook -p 6006

With the above steps, things work fine and as expected – but I lose the QoL provided by Nx integration. It’s been sufficient as a workaround for now, but proper Nx integration would be nice.

Again, thanks for looking. As mentioned, I will set up some additional branches to demonstrate. I will close until then as to avoid clutter.

[mandarini]

Hi @octadecimal ! Thank you for all the info. Yeah, the Nx integration should definitely work as the native one. So, if you can help me, please try the following:

1. Created a CRA (npx create-react-app --template=typescript) and add Storybook (npx sb init) and then add your classes, and let me know if it works as you expect. If it does, please share the repo with me. (for me it did not work)

2. In your Nx workspace, set up everything so that it works as expected for you (actually just share with me the code that you already have that works, the one with the manual set up). Because when I tried it, it did not work

3. You said that if you add the classes in the same file (not import them), it works, on an Nx workspace with the Nx setup (you wrote: “served via nx storybook when Animal and Cat are declared in the same file as App.tsx”). It did not work for me. So can you please share the code which worked for you?

Again, thank you so so much for giving me all this information! I really want to help, because it’s super important for us (for Nx) to provide the best experience possible, and the same experience as Storybook without Nx.