typescript - NextJS, Storybook, SVG och absoluta importvägar

Kan inte använda SVG som moduler för både NextJS-app och Storybook, importerade med absoluta sökvägar. Med många försökta uppsättningar kunde jag antingen importera SVG i Next eller i Storybook, men inte båda. Jag använde denna uppsättning för babel-plugin-inline-react-svg:

// .babelrc
{
  ...
  "plugins": [
    ...
    "inline-react-svg"
  ]
}

Med detta plugin behöver inte Storybook någon konfiguration och denna exempel kod fungerar som förväntat:

import Wrapper from '../../../components/Wrapper';
import IconSVG from '../../../icons/sandwich.svg';

export const WrappedSVG = () => (
  <Wrapper>
    <IconSVG />
  </Wrapper>
);

Men det följande gör det inte:

import Wrapper from 'components/Wrapper';
import IconSVG from 'icons/sandwich.svg';

export const WrappedSVG = () => (
  <Wrapper>
    <IconSVG />
  </Wrapper>
);

Wrapper bearbetas, men inte ikonen: Kan inte hitta modul

Här är svgr-uppsättningen:

// next.config.js
module.exports = {
  webpack(config, options) {
    ...
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

// .storybook/main.js
module.exports = {
  ...
  webpackFinal: async config => {
    ...
    config.module.rules.unshift({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
}

Denna konfiguration fungerar bra på applikationssidan, men i Storybook får jag DOMException: "String contains an invalid character"

Mitt npm run dev-skript är detta: ts-node --project tsconfig.server.json src/server.ts (via nodemon).

Jag hoppas att någon kan ge mig en ledtråd om hur man får absoluta importer av SVG-komponenter att fungera för både NextJS och Storybook.

Svar #1

Det finns ett svar på ett annat problem som fungerade för mig här.

Det kan bero på en konflikt med Storybooks standard-SVG-laddare. Här är vad som fungerade för mig:

module.exports = {
  webpackFinal: async (config, { configType }) => {
    const rules = config.module.rules;
    const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;

    rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  }
};

Svar #2

När det gäller absoluta sökvägar stöder Next.js nu alias i filimporter med minimal anpassad konfiguration i tsconfig.json/jsconfig.json-filer (ingen behov av webpack-konfiguration (*experimentell fas)).

För att konfigurera, ta en titt här!

Relaterade artiklar