Skip to content

[Bug] next/image plugin does not work with vite-plugin-svgr #48

@rickdunkin

Description

@rickdunkin

Describe the bug

When using @storybook/nextjs-vite I'm currently unable to include any components in my stories that utilize SVGs as React components via SVGR as the next-image plugin attempts to load all SVGs with seemingly no way to override what it loads.

Steps to reproduce the behavior

  1. Go to this StackBlitz
  2. Let it install/start
  3. See error in the preview: The requested module '/@id/virtual:next-image?imagePath=/home/projects/github-vpr794yg/src/icons/plus.svg' does not provide an export named 'ReactComponent'

Expected behavior

I should be able to utilize SVGR in some way to load SVGs

Environment

  • OS: any
  • Node.js version: any
  • NPM version: any

Additional context

My vite plugin knowledge is limited so I don't know if this is as simple as allowing includePattern and/or excludeImporterPattern to be customized or if there's some sort of auto-detect that can be done (I have @svgr/webpack in my next config for example), but I believe this is the same issue encountered in this discussion a few months back so this likely isn't a new or isolated issue

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions