[Bug] ReferenceError: exports is not defined since 7.6.0-alpha.5

[adamhari]

Describe the bug

The storybook project will finish bundling, and upon visiting the web app the story window will show

ReferenceError: exports is not defined

Steps to reproduce the behavior

1. Run storybook dev on a project >= 7.6.0-alpha.5 with addon-react-native-web.
2. Visit the storybook app URL

https://github.com/adamhari/addon-react-native-web/tree/7.6.0-exports-is-not-defined

Expected behavior

The app will successfully render stories

Screenshots and/or logs

Environment

• OS: MacOS Ventura 13.6
• Node.js version: 18.16.0
• NPM version: 9.5.1
• Browser (if applicable): Chgrome
• Browser version (if applicable): 119.0.6045.105

Additional context

This issue is not present in 7.6.0-alpha.4

[dannyhw]

I think this might relate to the removal of react as a peer dependency, will look into this.

[junchenjun]

Same issue here

[dannyhw]

Working on a fix but still struggling to find the root cause. Will update when I know more. Recommend staying on 7.5 for now if you can.

[dannyhw]

A fix is being worked on by the core team that will land upstream sometime soon. In the meantime this seems to be a valid workaround (put webpackFinal in main.js).

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

    // Remove export-order-loader since it doesn't work properly for CommonJS code
    // See https://github.com/storybookjs/storybook/issues/25383
    // 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;
  },
  // ...
};```

[dannyhw]

this has now been fixed in 7.6.9 and the workaround can be removed.