storybook: [Bug]: ReferenceError: exports is not defined after update to 7.6

Describe the bug

Hi, after updating storybook version from 7.4 to 7.6 I’m getting this error:

ReferenceError: exports is not defined at ./src/compo1/compo1.stories.jsx (http://localhost:6006/compo1-compo1-stories.iframe.bundle.js:46:1) at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33) at fn (http://localhost:6006/runtime~main.iframe.bundle.js:299:21) at http://localhost:6006/main.iframe.bundle.js:171:10 at async StoryStore.importFn (http://localhost:6006/main.iframe.bundle.js:104:27) at async StoryStore.loadStory (http://localhost:6006/sb-preview/runtime.js:47:9920) at async http://localhost:6006/sb-preview/runtime.js:81:9005 at async StoryRender.runPhase (http://localhost:6006/sb-preview/runtime.js:81:8766) at async StoryRender.prepare (http://localhost:6006/sb-preview/runtime.js:81:8924) at async PreviewWeb.renderSelection (http://localhost:6006/sb-preview/runtime.js:101:3102)

I noticed that if I remove the babel plugin “@babel/plugin-transform-modules-commonjs” it works, but I need that plugin for the rest of the project, I created a repo using the sandbox to show the problem.

To Reproduce

https://github.com/ramirezcgn/sbsandbox

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 PRO 7730U with Radeon Graphics
  Binaries:
    Node: 16.20.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (120.0.2210.61)
  npmPackages:
    @storybook/addon-actions: ^7.6.6 => 7.6.6
    @storybook/addon-docs: ^7.6.6 => 7.6.6
    @storybook/addon-essentials: ^7.6.6 => 7.6.6
    @storybook/addon-interactions: ^7.6.6 => 7.6.6
    @storybook/addon-links: ^7.6.6 => 7.6.6
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
    @storybook/blocks: ^7.6.6 => 7.6.6
    @storybook/react: ^7.6.6 => 7.6.6
    @storybook/react-webpack5: ^7.6.6 => 7.6.6
    @storybook/test: ^7.6.6 => 7.6.6
    @storybook/testing-library: ^0.2.2 => 0.2.2
    storybook: ^7.6.6 => 7.6.6

Additional context

No response

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 4
Comments: 28 (24 by maintainers)

Most upvoted comments

@mlazari just tested and it actually works, thanks !

narajaon on Jan 10, 2024

In case someone is looking for a temporary fix, this is what we did in our project to workaround the issue:

.storybook/main.js

module.exports = {
  // ...
  webpackFinal: async (config) => {
    // ...

    // Remove export-order-loader since it doesn't work properly for CommonJS code
    // It currently appends ES code to CommonJS code resulting in a "exports is not defined" error
    // See https://github.com/storybookjs/storybook/issues/25383
    // This might result in the order of stories not corresponding to the order of exports,
    // although from my testing it doesn't seem to be the case and works fine without it
    // TODO: remove this fix once it is fixed in the library
    config.module.rules = config.module.rules.filter(
      (rule) =>
        !rule?.use?.some?.((u) =>
          String(u?.loader)?.includes?.('export-order-loader')
        )
    );

    // ...

    return config;
  },
  // ...
};

This removes the export-order-loader, which as I understand is required only for making the order of stories correspond to the order of exports, since webpack5 doesn’t guarantee to preserve the original export order (as per the babel plugin docs this loader is replacing since version 7.6.0-alpha.5 - https://www.npmjs.com/package/babel-plugin-named-exports-order). Per my testing it seems to preserve the export order even without this loader, at least in our project, so I don’t see any behaviour change when removing it.

mlazari on Jan 10, 2024

@valentinpalkovic https://github.com/storybookjs/storybook/pull/25540

mlazari on Jan 10, 2024

@mlazari Thank you for the workaround.

I will try to provide a fix soon.

valentinpalkovic on Jan 10, 2024

@mlazari Thank you for the deep dive and the provided PR! Much appreciated.

valentinpalkovic on Jan 10, 2024

I will take care of these errors 😃

valentinpalkovic on Jan 10, 2024

Another thing I see in the file in the error stack trace (http://localhost:6006/compo1-compo1-stories.iframe.bundle.js):

This code snippet with "@storybook/react-webpack5": "7.6.0-alpha.4",:

Object.defineProperty(exports, "__esModule", ({
    value: true
}));
exports["default"] = exports.Default = void 0;

changes to this after the update to "@storybook/react-webpack5": "7.6.0-alpha.5",:

Object.defineProperty(__webpack_exports__, "__esModule", ({
    value: true
}));
exports.default = exports.Default = void 0;

mlazari on Jan 4, 2024