Size: a a a

Next.js — русскоговорящее сообщество

2020 April 19

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
Гугления кроме похожего кейса https://stackoverflow.com/questions/61241112/next-js-typescript-import-aliases-with-babel-plugin-module-resolver
ничего не дали.
Буду благодарен за любой совет
источник

L

Looch in Next.js — русскоговорящее сообщество
Znacovean Simion
Народ
подскажите кто столкнулся с проблемой с алиасами.
Настроил их через tsconfig
Чтобы next.js понимал эти алиасы у меня было множество вариантов, но я воспользовался предложенным в коммьюнити - добавил в next.config

experimental: {
   jsconfigPaths: true,
 
},

Всё заработало за исключением импортов svg

импорты svg поддерживаются с помощью babel плагина
'inline-react-svg'

По итогу
import Close from '@public/img/close.svg';

так не работает

а релативный импорт пашет
import Close from '../../../public/img/close.svg';


Сталкивался ли кто с этим? Нашли ли какой-нибудь воркараунд?
тебе нужно сделать фейкосы ts модуль для svg файло потому что ts сам по себе их не поймет
источник

L

Looch in Next.js — русскоговорящее сообщество
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
Looch
тебе нужно сделать фейкосы ts модуль для svg файло потому что ts сам по себе их не поймет
я вкурсе
я так и сделал
у меня то релативные пути он понимает
не понимает альясы
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
и именно у свг
источник

L

Looch in Next.js — русскоговорящее сообщество
может этот фейк модуль работает только с релативными путями
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
фейк модулем вы назваете кастомный .d.ts?
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
в таком разе
import ProductImage from '@public/img/product.png';
почему работает?
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
а вот на свг сразу ругается типо не находит
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
заменя на релативный и вуаля всё пашет..
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
если экспериментальная фича next.js под капотом юзает тот же бабель модуль babel-plugin-module-resolver c тем же issue что товарищ описал на стек-оверфлоу - то нз прям что делать
но узнать наверняка об экспериментальных фичах некста не особо получается - они нигде не упомянуты
источник

L

Looch in Next.js — русскоговорящее сообщество
хмммм, тогда чего хз ts не понимает тогда
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
Looch
хмммм, тогда чего хз ts не понимает тогда
в ide ошибки нету
ошибка в рантайме в консоли
и в браузере
значит ли это что это next.js ошибка?
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
https://github.com/zeit/next.js/commit/38e42cd4bbf9fdbacdc35e7f30d028a692911b76
вот эта экспериментальная фича - сорсы
источник

L

Looch in Next.js — русскоговорящее сообщество
Znacovean Simion
в ide ошибки нету
ошибка в рантайме в консоли
и в браузере
значит ли это что это next.js ошибка?
Да, это явно не ошибка ts
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
Looch
Да, это явно не ошибка ts
вот лог
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
есть идеи в каком направлении копать?(
источник

L

Looch in Next.js — русскоговорящее сообщество
В вебпак конфиг скорее всего
источник

ZS

Znacovean Simion in Next.js — русскоговорящее сообщество
Looch
В вебпак конфиг скорее всего
выпилил из бабеля проблемный 'inline-react-svg'
и вместо него юзнул вебпаковский @svgr/webpack
теперь вроде как ошибок никаких нет, но нужны будут тесты)
но это пипец конечно )
источник

V

Valentin in Next.js — русскоговорящее сообщество
что именно пипец? поделись болью
источник