search

RyanClementsHax / storybook-addon-next

A no config Storybook addon that makes Next.js features just work in Storybook
MIT License
219 stars 29 forks source link

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

Closed anatoo closed 1 year ago

anatoo commented 2 years ago

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

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.

harvestnide commented 2 years ago

Hey @anatoo, thanks for your PR, I was facing same issue. However, your patch was not working for me initially and I had to do some tweaks to webpack config (which was just copy-pasted from readme)

Example suggests to modify only one rule with .svg and I had 3.

So, I've added exclude to all of them and it seems to be working (config attached)

webpackFinal: (config) => {
    // this modifies the existing image rule to exclude .svg files
    // since we want to handle those files with @svgr/webpack
    const svgRules = config.module.rules.filter((rule) =>
      rule.test.test('.svg'),
    );

    svgRules.forEach((rule) => {
      rule.exclude = /\.svg$/;
    });

    // configure .svg files to be loaded with @svgr/webpack
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
}

tl;dr can you share your Webpack config? If my issue is reproducible - we probably should update readme as well

exsesx commented 2 years ago

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

ixahmedxi commented 2 years ago

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 have the same problem as well, any suggested fixes for this?

ixahmedxi commented 2 years ago

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

mandarini commented 2 years ago

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

mandarini commented 2 years ago

This PR will solve the issue

vdumitraskovic commented 1 year ago

@mandarini I have trouble in an NX monorepo even after the https://github.com/nrwl/nx/pull/12371 was merged. Now I'm getting TypeError: Cannot read properties of undefined (reading 'replace').

Can I in any way assist in resolving the issue?

mandarini commented 1 year ago

Hi @vdumitraskovic ! I'll take a look at this next week. What you can do is run the command with verbose, and see where exactly in the code the error happens. What you can also do, is create a reproduction repository and link it here so that I can reproduce this locally. Thank you!!! :D :D

vdumitraskovic commented 1 year ago

@mandarini here is the repro repo: https://github.com/vdumitraskovic/storybook-addon-next-with-nx-repro/

The app breaks as soon as there is a SVG icon imported with svgr, like 

import { ReactComponent as Icon } from './icon.svg';

The error happens in the next-image-loader-stub.js in the storybook-addon-next because the image is undefined.

I hope this helps.

juliolugo96 commented 1 year ago

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'm currently facing the same issue with the same version of the addon. Even if I change my current Webpack config and add a particular rule to bypass this issue, it still fails.

mandarini commented 1 year ago

Hi all, thanks for posting in this issue. I'm on leave for the next couple of weeks, so I will not have time to look into this. I'll ping @jaysoo just in case, but most probably I will be the one to look into this. Please bear with me (and my time off :P)!

mandarini commented 1 year ago

Ok, potentially this PR fixes the issue. Maybe yes, maybe no.

Edit: it does not :(

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 1.6.10 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

mandarini commented 1 year ago

Thank you SO much @RyanClementsHax !

Heyy can you all please test again to make sure all is fixed now?

vdumitraskovic commented 1 year ago

Thanks everyone! I can confirm that the issue is resolved!

daves28 commented 1 year ago

FYI This same exact issue is still present when using @nx/react/plugins/storybook and the framework @storybook/nextjs. Stemming from the next-image-loader-stub.js inside storybook/nextjs

nx 16.4 @nx/react 16.4 @storybook/nextjs 7.0.23