[Bug]: Preview Window TypeError: b2 is not iterable

[yss14]

Describe the bug

I just wanted to setup storybook for our NextJS project (with TypeScript). Setup via npx storybook@latest init worked fine. I just had to do two minor changes to the default configuration to get the studio up and running.

1. Enabling absolute path imports via a custom webpack config override

   
   import type { StorybookConfig } from '@storybook/nextjs'
   import * as path from 'path'

const config: StorybookConfig = { stories: ['../src/*/.mdx', '../src/*/.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-onboarding', '@storybook/addon-interactions', ], framework: { name: '@storybook/nextjs', options: {}, }, docs: { autodocs: 'tag', }, webpackFinal: async (config) => { config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '../src')]

return config

}, } export default config

2. Adding a context provider via annotations ad described in the docs
```typescript
import type { Preview } from '@storybook/react'
import { NextIntlClientProvider } from 'next-intl'

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: (Story) => {
    return (
      <NextIntlClientProvider locale={'en'}>
        <Story />
      </NextIntlClientProvider>
    )
  },
}

export default preview

Now every time I open some story preview the following runtime error is showing up:

TypeError: b2 is not iterable
    at http://localhost:6006/sb-preview/runtime.js:47:3212
    at Array.reduce (<anonymous>)
    at getArrayField (http://localhost:6006/sb-preview/runtime.js:47:3167)
    at composeConfigs (http://localhost:6006/sb-preview/runtime.js:47:3702)
    at Object.getProjectAnnotations [as nextFn] (http://localhost:6006/main.iframe.bundle.js:62:73)
    at http://localhost:6006/sb-preview/runtime.js:4:80011
    at Array.forEach (<anonymous>)
    at SynchronousPromise4._runResolutions (http://localhost:6006/sb-preview/runtime.js:4:79952)
    at SynchronousPromise4.then (http://localhost:6006/sb-preview/runtime.js:4:77494)
    at PreviewWeb.getProjectAnnotationsOrRenderError (http://localhost:6006/sb-preview/runtime.js:81:13211)

Even for the build-in example stories.

To Reproduce

Hard to provide a full reproduction repository, since it's a complex commercial project. What I tried is to setup storybook on a new greenfield NextJS repository including the custom adjustments to the config and there the issue is not popping up. So it must be related to some specifics at our complex commercial project.

System

Storybook Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: 8.9.0 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Safari: 16.3
    Chromium: Version 104.0.5112.81
  npmPackages:
    @storybook/addon-essentials: ^7.6.7 => 7.6.7 
    @storybook/addon-interactions: ^7.6.7 => 7.6.7 
    @storybook/addon-links: ^7.6.7 => 7.6.7 
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10 
    @storybook/blocks: ^7.6.7 => 7.6.7 
    @storybook/nextjs: ^7.6.7 => 7.6.7 
    @storybook/react: ^7.6.7 => 7.6.7 
    @storybook/test: ^7.6.7 => 7.6.7 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.7 => 7.6.7 

### Additional context

This are our dependencies:

"@auth0/nextjs-auth0": "^3.2.0",
"@chakra-ui/react": "^2.8.0",
"@chakra-ui/utils": "^2.0.15",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@formatjs/intl-localematcher": "^0.5.2",
"@hookform/resolvers": "^2.9.11",
"@next/bundle-analyzer": "^14.0.4",
"@pandacss/preset-panda": "^0.21.0",
"@pandacss/types": "^0.21.0",
"@portabletext/react": "^3.0.7",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-compose-refs": "^1.0.1",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"@react-google-maps/api": "^2.19.2",
"@rehooks/component-size": "^1.0.3",
"@rudderstack/analytics-js": "3.0.0-beta.15",
"@sanity/image-url": "^1.0.2",
"@sentry/nextjs": "^7.86.0",
"@shadow-panda/style-context": "^0.7.1",
"@tanstack/react-query": "^5.13.4",
"@tanstack/react-query-devtools": "^5.13.5",
"@vercel/edge-config": "^0.4.1",
"axios": "^1.6.2",
"axios-retry": "^4.0.0",
"chroma-js": "^2.4.2",
"compress-json": "^2.1.2",
"cookie": "^0.6.0",
"dataloader": "^2.2.2",
"date-fns": "^2.30.0",
"downshift": "^6.1.12",
"fast-sort": "^3.4.0",
"favicons": "^7.1.4",
"framer-motion": "^10.16.16",
"groqd": "^0.15.10",
"html5-qrcode": "^2.3.8",
"immer": "^9.0.21",
"libphonenumber-js": "^1.10.51",
"lodash": "^4.17.21",
"lucide-react": "^0.294.0",
"mime-types": "^2.1.35",
"negotiator": "^0.6.3",
"next": "^14.0.4",
"next-intl": "3.3.2",
"next-sanity": "^7.0.3",
"next-sanity-image": "^6.1.1",
"react": "^18.2.0",
"react-datatrans-light-box": "^4.0.1",
"react-datepicker": "^4.16.0",
"react-day-picker": "^8.8.1",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-error-boundary": "^4.0.11",
"react-gtm-module": "^2.0.11",
"react-headroom": "^3.2.1",
"react-hook-form": "^7.45.4",
"react-hotjar": "^6.1.0",
"react-icons": "^4.12.0",
"react-input-mask": "^2.0.4",
"react-intersection-observer": "^9.5.3",
"react-phone-input-2": "^2.15.1",
"react-select": "^5.8.0",
"react-snap-carousel": "^0.3.2",
"react-use": "^17.4.2",
"resize-observer": "^1.0.4",
"rooks": "^7.14.1",
"seamless-scroll-polyfill": "^2.3.4",
"server-only": "^0.0.1",
"stable-hash": "^0.0.3",
"suspend-react": "^0.1.3",
"ts-essentials": "^9.4.1",
"typescript-checker": "^2.0.0",
"use-debounce": "^10.0.0",
"uuid": "^9.0.1",
"zod": "^3.22.4",
"zustand": "^3.7.2"

We are using ChakraUI in combination with the "old" NextJS pages router, and Panda CSS in combination with the "new" NextJS app router.

[shilman]

@yss14 decorators should be an array. Try this instead:

  decorators: [
    (Story) => {
      return (
        <NextIntlClientProvider locale={'en'}>
          <Story />
        </NextIntlClientProvider>
      )
    }
  ],

Closing for now, but LMK if this doesn't work and we can re-open.