Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

[sedghi]

I'm pretty sure this was working before, but suddenly stopped working I guess. I can't find any circular dependency ....

My component is

import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from '../';

const ContextMenu = ({ items }) => {
  return (
    <div
      className="relative bg-secondary-dark rounded z-50 block w-48"
      onContextMenu={e => e.preventDefault()}
    >
      {items.map((item, index) => (
        <div
          key={index}
          onClick={() => item.action(item)}
          className="flex px-4 py-3 cursor-pointer items-center transition duration-300 hover:bg-primary-dark border-b border-primary-dark last:border-b-0"
        >
          <Typography>{item.label}</Typography>
        </div>
      ))}
    </div>
  );
};

ContextMenu.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      actionType: PropTypes.string.isRequired,
      action: PropTypes.func.isRequired,
    })
  ).isRequired,
};

export default ContextMenu;

My story is

import ContextMenu from '../ContextMenu';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: ContextMenu,
  title: 'Modals/ContextMenu',
};

<Meta title="Modals/ContextMenu" component={ContextMenu} />

export const contextMenueTemplate = createComponentTemplate(ContextMenu);

<Heading
  title="ContextMenu"
  componentRelativePath="ContextMenu/ContextMenu.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

Context Menu is a component that is used to display a list of options to the
user. This component can be used for use cases such as opening a list of options
on user right click.

<Canvas>
  <Story
    name="Overview"
    args={{
      items: [
        {
          label: 'Delete measurement',
          actionType: 'Delete',
          action: item => {
            window.alert(`${item.label} clicked`);
          },
          value: {},
        },
        {
          label: 'Add Label',
          actionType: 'setLabel',
          action: item => {
            window.alert(`${item.label} clicked`);
          },
          value: {},
        },
      ],
    }}
  >
    {contextMenueTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={ContextMenu} />

## Contribute

<Footer componentRelativePath="ContextMenu/__stories__/contextMenu.stories.mdx" />

[giancarlohorta]

is there some solution?

[waustin]

I had the same issue. When I removed my .mdx stories. It worked

[sedghi]

which file you removed? .mdx stories is the actual story right?

[waustin]

Yes. I had 2 Stories written in MDX .stories.mdx. We were just using those as example sheets for some components with multiple variants.
The storybook ran locally in dev and production. I could publish the storybook to chromatic using the CLI tool. It only failed with that WEBPACK error when I ran it from a github action.

After removing both my .mdx stories the github action deployed successfully

[sedghi]

But I don't want to remove my stories, I'm confused. You are using storyBook without having .mdx?

[waustin]

Yes. We use the JS or TS version for our stories https://storybook.js.org/docs/react/get-started/whats-a-story

On Tue, Mar 28, 2023 at 3:50 PM Alireza ***@***.***> wrote: But I don't want to remove my stories, I'm confused. You are using storyBook without having .mdx? — Reply to this email directly, view it on GitHub <#21525 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADRNXKKAELAHCD7HG63ZGDW6NFLHANCNFSM6AAAAAAVVWEFHI> . You are receiving this because you commented.Message ID: ***@***.***>

-- Wade Austin

[sedghi]

I see, thanks a lot. I will try that

[waustin]

Which version of Storybook are you using?

We are using the 7.x beta on a NextJS 13 site.

[sedghi]

Just to put the result, it was a recursive import (it was not kind of) but I imported from one level up and it worked fine

[ackvf]

This happens often when re-exporting and importing from index.js files. Sometimes importing directly solves it.

[caiocaprio]

Any solution to allow re-exporting and importing?

[cpifferi]

@sedghi I have the same problem but I don't understand your solution. Can you explain it? How did you change your code? thanks

[sedghi]

Basically I had to import them from one level up for some weird reason.

If you have like import Button from ../Button

do this

import Button from ../../Components/Button

[kotAPI]

This behaviour is annoying, this used to work well before, after upgrading to 7+ these errors started surfacing 😓

[benevbright]

this might be helpful somebody. My issue was with import { something } from ".".