Question

不能将SVG用作通过绝对路径导入的NextJS应用程序和Storybook的模块。通过许多尝试的设置，我能够在Next或Storybook中导入SVG，但不能同时导入两者。我将此设置用于babel-plugin-inline-react-svg：

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

有了此插件，Storybook不需要任何配置，此示例代码可以按预期工作：

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

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

但是以下内容却没有：

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

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

正在处理包装器，但未处理图标：Cannot find module

这是svgr的设置：

// 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;
  },
}

此配置在应用程序端工作正常，但在Storybook中，我得到了DOMException: "String contains an invalid character"

我的npm run dev脚本是这样的：ts-node --project tsconfig.server.json src/server.ts（通过nodemon）。

我希望有人能给我一个提示，如何使SVG组件的绝对导入同时适用于NextJS和Storybook。

Answer 1

关于绝对路径，Next.js现在支持文件导入中的别名，并且在tsconfig.json / jsconfig.json文件中具有最少的自定义配置（无需进行webpack配置（*实验阶段））。

要配置，请查看here！

Answer 2

这里有an answer个对我有用的不同问题。

这可能是因为与Storybook的默认SVG加载程序发生冲突。这是对我有用的东西：

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;
  }
};

Answer 3

可以通过配置webpack来完成。在项目根目录下创建next.config.js文件，该文件不存在，然后添加以下文件：

//next.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  webpack: config => {
    config.resolve.alias['~'] = path.resolve(__dirname);
    return config;
  }
};

使用方法：

import myimage from '~/somepath/myimage.svg'

有关此tutorial的更多详细信息。

查看Weppack文档here。

要在next.config.js上配置多个插件，请检查this。

NextJS，Storybook，SVG和绝对导入路径

3 个答案: