[Bug] Cannot read properties of undefined (reading 'constantViolations')

[Donato-EF]

Current Behavior

I have upgraded nx from 15.5.33 to 15.6.0 because of this issue #14373. Then, when I try to run:

npx nx e2e forms-e2e --verbose

I am getting this issue:

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/donato/workspace/martech-forms/libs/forms/src/lib/components/atoms/button/button.stories.tsx: Cannot read properties of undefined (reading 'constantViolations')
    at disallowConstantViolations (/Users/donato/workspace/martech-forms/node_modules/@babel/plugin-transform-block-scoping/lib/validation.js:22:35)
    at validateUsage (/Users/donato/workspace/martech-forms/node_modules/@babel/plugin-transform-block-scoping/lib/validation.js:16:7)
    at transformBlockScopedVariable (/Users/donato/workspace/martech-forms/node_modules/@babel/plugin-transform-block-scoping/lib/index.js:118:57)
    at PluginPass.VariableDeclaration (/Users/donato/workspace/martech-forms/node_modules/@babel/plugin-transform-block-scoping/lib/index.js:81:9)
    at newFn (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/visitors.js:143:21)
    at NodePath._call (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/path/context.js:45:20)
    at NodePath.call (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/path/context.js:35:17)
    at NodePath.visit (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/path/context.js:80:31)
    at TraversalContext.visitQueue (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/path/context.js:86:52)
    at TraversalContext.visitQueue (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/donato/workspace/martech-forms/node_modules/@babel/traverse/lib/context.js:109:19)
    at processResult (/Users/donato/workspace/martech-forms/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/donato/workspace/martech-forms/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/donato/workspace/martech-forms/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/donato/workspace/martech-forms/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/donato/workspace/martech-forms/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/donato/workspace/martech-forms/node_modules/babel-loader/lib/index.js:59:103

This is the actual story file:

import { Story, Meta } from '@storybook/react';
import { Formik, Form } from 'formik';
import { Button as ButtonComponent, ButtonProps } from './button';

export default {
  component: ButtonComponent,
  title: 'Components/Atoms/Button',
} as Meta;

const Template: Story<ButtonProps> = (args) => {
  return (
    <Formik
      initialValues={{}}
      onSubmit={(values) => console.log('submitted successfully', values)}
    >
      {() => (
        <Form>
          <ButtonComponent
            {...args}
            label={args.label}
            style={{ marginTop: '10px' }}
            data-cy="submit-button"
          ></ButtonComponent>
        </Form>
      )}
    </Formik>
  );
};

export const Button = Template.bind({});
Button.args = {
  label: 'Submit button',
  disabled: false,
  isSubmitting: false,
};

Expected Behavior

Storybook is run correctly.

Github Repo

No response

Steps to Reproduce

1. npx nx e2e forms-e2e --verbose

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.19.0
   OS   : darwin arm64
   npm  : 7.24.2
   
   nx : 15.6.0
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.6.0
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.6.0
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.6.0
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.6.0
   @nrwl/js : 15.6.0
   @nrwl/linter : 15.6.0
   @nrwl/nest : Not Found
   @nrwl/next : 15.6.0
   @nrwl/node : 15.6.0
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.0
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.6.0
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.6.0
   @nrwl/web : 15.6.0
   @nrwl/webpack : 15.6.0
   @nrwl/workspace : 15.6.0
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @abgov/nx-release: 3.1.2

Failure Logs

No response

Additional Information

It seems there is some kind of incompatibility between the babel loader and @babel/plugin-transform-block-scoping.

[Donato-EF]

also seeing this:

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.

[mandarini]

Hi there @Donato-EF ! I think this issue is fixed. Can you please retry with latest version of Nx, even with 15.7.0-beta.5? So, can you please do nx migrate 15.7.0-beta.5 and let me know if your issue is fixed?

Also, which version of Storybook are you using? It would be super helpful if you could provide me with a simple reproduction repository!

[Donato-EF]

Tried with 15.7.0, still not solved unfortunately.

[Donato-EF]

I found that if I override the @babel/plugin-transform-block-scoping plugin in my package.json, the issue is solved, like this:

"overrides": {
"@babel/plugin-transform-block-scoping": "7.20.5"
 }

[Donato-EF]

I feel this could be related to storybook itself.

[mandarini]

Oh ok! Thanks. Can you please open an issue on the Storybook repository, then? This happened in the past with some other deps, as well.

[mandarini]

It's good to know there's a workaround at the moment, like pinning the version, but I'll keep an eye on it, too!

[mandarini]

If you can provide a simple reproduction repository, it would be super useful @Donato-EF !

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[mandarini]

@Donato-EF I closed this issue. If you find that it persists, please write a comment here, and I can reopen, or ping the Storybook team!

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.