3 replies

Is it possible to import SVGs from a shared package in next 15?

In Next 14, I was able to import SVG files just fine as

StaticImageData

StaticImageData

. After upgrading to Next 15, the only way I was able to get it to work was by adding this to my next config

// Grab the existing rule that handles SVG imports
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

config.module.rules.push({
  ...fileLoaderRule,
  test: /\.svg$/i
});

// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i;

// Grab the existing rule that handles SVG imports
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

config.module.rules.push({
  ...fileLoaderRule,
  test: /\.svg$/i
});

// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i;

This works fine, but in my PNPM monorepo I do some imports like this:

import EtsyIcon from '@something/shared-ui/src/assets/integration-icons/etsy-icon.svg';

import EtsyIcon from '@something/shared-ui/src/assets/integration-icons/etsy-icon.svg';

This no longer works and gives me this error:

Error: Image import "@something/shared-ui/src/assets/integration-icons/etsy-icon.svg" is not a valid image file. The image may be corrupted or an unsupported format.

Error: Image import "@something/shared-ui/src/assets/integration-icons/etsy-icon.svg" is not a valid image file. The image may be corrupted or an unsupported format.

How is this supposed to work? I saw a similar issue here but its slightly unrelated.

GitHub

@svgr/webpack Not working with svg's from shared package inside mon...

Bug Report Inside my monorepo I have a NextJS project and a shared 'icons' package which is just a folder full of svg files. Whenever I want to use @svgr/webpack with the below next.confi...

TTC

Theo's Typesafe Cult•12mo ago•

3 replies

jakeleventhal

Is it possible to import SVGs from a shared package in next 15?

In Next 14, I was able to import SVG files just fine as

StaticImageData

StaticImageData

. After upgrading to Next 15, the only way I was able to get it to work was by adding this to my next config

// Grab the existing rule that handles SVG imports
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

config.module.rules.push({
  ...fileLoaderRule,
  test: /\.svg$/i
});

// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i;

// Grab the existing rule that handles SVG imports
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

config.module.rules.push({
  ...fileLoaderRule,
  test: /\.svg$/i
});

// Modify the file loader rule to ignore *.svg, since we have it handled now.
fileLoaderRule.exclude = /\.svg$/i;

This works fine, but in my PNPM monorepo I do some imports like this:

import EtsyIcon from '@something/shared-ui/src/assets/integration-icons/etsy-icon.svg';

import EtsyIcon from '@something/shared-ui/src/assets/integration-icons/etsy-icon.svg';

This no longer works and gives me this error:

Error: Image import "@something/shared-ui/src/assets/integration-icons/etsy-icon.svg" is not a valid image file. The image may be corrupted or an unsupported format.

Error: Image import "@something/shared-ui/src/assets/integration-icons/etsy-icon.svg" is not a valid image file. The image may be corrupted or an unsupported format.

How is this supposed to work? I saw a similar issue here but its slightly unrelated.

GitHub

@svgr/webpack Not working with svg's from shared package inside mon...

Bug Report Inside my monorepo I have a NextJS project and a shared 'icons' package which is just a folder full of svg files. Whenever I want to use @svgr/webpack with the below next.confi...

Is it possible to import SVGs from a shared package in next 15?

Similar Threads

Is it possible to import SVGs from a shared package in next 15?

Similar Threads

Similar Threads

Similar Threads