Далее JS, сборник рассказов, SVG и абсолютные пути импорта - PullRequest
Новая
       15

Далее JS, сборник рассказов, SVG и абсолютные пути импорта

0 голосов
/ 15 марта 2020

Невозможно использовать SVG в качестве модулей для приложения Next JS и Storybook, импортированных с абсолютными путями. Со многими опробованными установками я смог импортировать SVG либо в Next, либо в Storybook, но не в оба. Я использовал эту настройку для 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 setup: 

// 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 работать как для Next JS, так и для Storybook.

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Что касается абсолютных путей, то Next. js теперь поддерживает псевдонимы при импорте файлов с минимальной настраиваемой конфигурацией в файлах tsconfig.json / jsconfig. json (Нет необходимости в настройке веб-пакета (* экспериментальная стадия)).

Чтобы настроить, посмотрите здесь !

0 голосов
/ 13 апреля 2020

Это можно сделать с помощью конфигурации webpack. Создайте файл next.config. js в проекте root, если он не существует, и добавьте следующее: 

//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'

Подробнее об этом хорошем учебном пособии .

Проверьте документацию Weppack здесь .

Для настройки нескольких плагинов на сайте next.config. js check это .

...