Code Monkey home page Code Monkey logo

Comments (16)

ixahmedxi avatar ixahmedxi commented on July 4, 2024 3

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/[email protected]_4ezhcqr4l5iwrkp7cpn27pk7rm/node_modules/storybook-addon-next/dist/images/webpack.js:21:20)

This line throws the error because assetRule is undefined:

assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/

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

from storybook-addon-next.

mandarini avatar mandarini commented on July 4, 2024 3

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

from storybook-addon-next.

exsesx avatar exsesx commented on July 4, 2024 2

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/[email protected]_4ezhcqr4l5iwrkp7cpn27pk7rm/node_modules/storybook-addon-next/dist/images/webpack.js:21:20)

This line throws the error because assetRule is undefined:

assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/

from storybook-addon-next.

harvestnide avatar harvestnide commented on July 4, 2024 1

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

from storybook-addon-next.

mandarini avatar mandarini commented on July 4, 2024 1

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

Edit: it does not :(

from storybook-addon-next.

vdumitraskovic avatar vdumitraskovic commented on July 4, 2024 1

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

from storybook-addon-next.

ixahmedxi avatar ixahmedxi commented on July 4, 2024

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/[email protected]_4ezhcqr4l5iwrkp7cpn27pk7rm/node_modules/storybook-addon-next/dist/images/webpack.js:21:20)

This line throws the error because assetRule is undefined:

assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/

I have the same problem as well, any suggested fixes for this?

from storybook-addon-next.

mandarini avatar mandarini commented on July 4, 2024

This PR will solve the issue

from storybook-addon-next.

vdumitraskovic avatar vdumitraskovic commented on July 4, 2024

@mandarini I have trouble in an NX monorepo even after the nrwl/nx#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?

from storybook-addon-next.

mandarini avatar mandarini commented on July 4, 2024

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

from storybook-addon-next.

vdumitraskovic avatar vdumitraskovic commented on July 4, 2024

@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.

from storybook-addon-next.

juliolugo96 avatar juliolugo96 commented on July 4, 2024

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/[email protected]_4ezhcqr4l5iwrkp7cpn27pk7rm/node_modules/storybook-addon-next/dist/images/webpack.js:21:20)

This line throws the error because assetRule is undefined:

assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/

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.

from storybook-addon-next.

mandarini avatar mandarini commented on July 4, 2024

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)!

from storybook-addon-next.

github-actions avatar github-actions commented on July 4, 2024

🎉 This issue has been resolved in version 1.6.10 🎉

The release is available on:

Your semantic-release bot 📦🚀

from storybook-addon-next.

mandarini avatar mandarini commented on July 4, 2024

Thank you SO much @RyanClementsHax !

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

from storybook-addon-next.

daves28 avatar daves28 commented on July 4, 2024

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

from storybook-addon-next.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.