Does not work with `@nrwl/react/plugins/storybook` addon

Describe the bug

Storybook gives the error:

ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: Cannot read properties of undefined (reading 'replace')
    at Object.nextImageLoaderStub (/Users/anatoo/Workspace/xxx/xxx/node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js:7:75)
    at processResult (/Users/anatoo/Workspace/xxx/xxx/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/anatoo/Workspace/xxx/xxx/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at runSyncOrAsync (/Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
    at iterateNormalLoaders (/Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
    at /Users/anatoo/Workspace/xxx/xxx/node_modules/loader-runner/lib/LoaderRunner.js:224:4
    at /Users/anatoo/Workspace/xxx/xxx/node_modules/webpack/lib/NormalModule.js:834:15
    at Array.eval (eval at create (/Users/anatoo/Workspace/xxx/xxx/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/Users/anatoo/Workspace/xxx/xxx/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)

Your minimal, reproducible example

None

Steps to reproduce

1. Add @nrwl/react/plugins/storybook addon to “.storybook/main.js”
2. Run storybook but it just fail with the above error

Expected behavior

Storybook start normally

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS

storybook-addon-next version

v1.6.7

Additional context

@nrwl/react/plugin/storybook add the below webpack loader rule.

{
  test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
  type: 'asset',
  parser: { dataUrlCondition: { maxSize: 10000 } }
} 

storybook-addon-next 's configureStaticImageImport function refer generator.filename option of the rule.

  const assetRule = rules?.find(
    rule =>
      typeof rule !== 'string' &&
      rule.test instanceof RegExp &&
      rule.test.test('test.jpg')
  ) as RuleSetRule
  assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
  rules?.push({
    test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
    issuer: { not: /\.(css|scss|sass)$/ },
    use: [
      {
        loader: require.resolve('./next-image-loader-stub'),
        options: {
          filename: assetRule.generator?.filename // <<----
        }
      }
    ]
  })
  rules?.push({
    test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
    issuer: /\.(css|scss|sass)$/,
    type: 'asset/resource',
    generator: {
      filename: assetRule.generator?.filename // <<----
    }
  })

https://github.com/RyanClementsHax/storybook-addon-next/blob/main/src/images/webpack.ts#L15-L41

As a result, the generator.filename option is undefined and the storybook is broken.

[mandarini]

We are already looking into it! Thank you all for reporting!

[ixahmedxi]

I have a related issue. Nx mono repository with Next.js frontend and Storybook. Everything is mostly default settings.

storybook-addon-next 1.6.9

TypeError: Cannot set properties of undefined (setting 'test')
at configureStaticImageImport (/Users/exsesx/Space/s-projects/tso_v3/tso/node_modules/.pnpm/storybook-addon-next@1.6.8_4ezhcqr4l5iwrkp7cpn27pk7rm/node_modules/storybook-addon-next/dist/images/webpack.js:21:20)

This line throws the error because assetRule is undefined:

https://github.com/RyanClementsHax/storybook-addon-next/blob/104b02b997a10a283d069d1b6639dce02f903467/src/images/webpack.ts#L21

I’ve fixed this by downgrading @nrwl/react to 14.7.5