Как сделать импорт type?

Question

[Kolya112151]

Настраиваю Storybook, делаю вот такой импорт:

import type { Preview } from '@storybook/react'

Но выдаёт ошибку Unexpected token, expected "from"

Если я правильно понял, то type в импорте воспринимается как переменная, которую нужно импортировать, поэтому ожидается, что после неё будет идти from.

Что нужно сделать, чтобы type воспринимался корректно?

Comments

[WbICHA]

Версия тса 4.8+?

[Kolya112151]

WbICHA, да, всё верно. 5.1.6

[WbICHA]

Kolya112151, ну тогда покажи всю ошибку целиком. Чтобы не гадать что ты там "правильно понял".

[Kolya112151]

Это уже в браузере ошибка, когда выполняю npm run storybook

[WbICHA]

Kolya112151, ты бабелем код транспилишь? Если да, то зачем? Для перевода тса в жс есть тайпскрипт, бабель не для этого.

[Kolya112151]

WbICHA, так надо ахах, это учебный проект, нужно было бабель подключить)) То есть в нём проблема, получается? Просто не очевидно почему с типами такие проблемы. Или можно что-то в бабель-конфиге прописать?

[WbICHA]

Kolya112151, можно ли это сделать через сам бабель? Понятия не имею, я бабель напрямую никогда не использовал. Но, если не ошибаюсь, сам он не умеет с тсом работать, значит проблема в плагине, который не поддерживает актуальный тс.
В любом случае это и не является его задачей. Он должен переводить нормальный жс код в жс код, поддерживаемый старыми браузерами.
А переводить тс в жс задача тса.

[Kolya112151]

WbICHA, ладно и на том конечно спасибо)

[Aetae]

Kolya112151, WbICHA, babel из коробки умеет TS но во-первых без малейшей, собственно, проверки типов(тупо гонит как может, без ошибок), во-вторых ограничено(последний раз когда смотрел - даже enum'ы не умел).

Нормальный и самый надежный подход: использовать сначала компиляцию ts в режиме esnext, а потом уже результат компиляции прогонять через babel с нужным browserlist. Так достигается минимальный необходимый размер бандла со всеми плюшками, за счёт небольшого оверхеда времени сборки.

[WbICHA]

Aetae, собственно, я это и имел ввиду, но без деталей.)

[Kolya112151]

Aetae, ну у меня стоит как раз в tsconfig.json свойство "module": "ESNext". По идее всё так и происходит, что сначала ts компилируется, а потом babel переводит.

[Kolya112151]

Aetae, А хотя стоп, не факт. Не знаю даже с чего я решил в каком порядке оно компилируется ахах)

[Kolya112151]

Я посмотрел, по идее всё должно так и быть, в babel прописан @babel/preset-typescript, поэтому вроде они не должны пересекаться. И вроде как эти типы typescript должен компилировать сначала в js, а потом уже babel переводить это в более старые версии, для большей поддержки браузеров. Поэтому возможно дело и не в babel, а в чём-то другом. Осталось выяснить в чём. Но спасибо за инфу, Aetae, WbICHA))

[Kolya112151]

Aetae, хотя ещё что интересно, сам vscode ошибок не показывает. И сейчас такое ощущение, что импорт типов нормально функционирует. Ошибка сама появляется только при запуске storybook в браузере, возможно проблема где-то в самом сторибуке.

[Aetae]

Kolya112151, если ошибка появляется в браузере значит в браузер прилетает код, который содержит import type. После ts компиляции никакой информации о типах не остаётся, значит шаг с ts компиляцией где-то пропущен.

Больше ничего сказать нельзя, не зная какой системой сборки вы пользуетесь и какой у вас там конфиг.

[Kolya112151]

Aetae, если вдруг ещё интересно, продолжаю работать над проблемой)

Изменил название файла с babel.config.json на .babelrc и ошибка исчезла. Но только появилась новая:

Couldn't find any stories in your Storybook.
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.

Хотя пути проверил, вроде всё правильно настроено в main.js
Вот так:

stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']

В общем думаю дальше))
Если решу проблему полностью, отпишусь

[Aetae]

Kolya112151, ну для начала - полные пути запихни, если заработает значит относительные неверно указаны.

[Kolya112151]

Aetae, в общем случайным образом нашлось исправление.

Ошибка с путями появилась после ввода команды npx sb@next babelrc. Сначала я думал, что это просто создаст новый бабел-конфиг для сторибука, но видимо не только))

Короче, я решил откатиться обратно до ввода команды и только потом увидел, что я просто пропустил точку в имени конфига. Я написал babelconfig.json, а нужно было babel.config.json

Также ошибки с путями теперь тоже нет, потому что не вводил команду npx sb@next babelrc

Спасибо за советы))

Answer 1

[Kolya112151]

Поменял имя файла babelconfig.json на babel.config.json и всё заработало

Answer 2

[Василий Банников]

UPD: я не прав

Убери слово type. Его там быть не должно.

Comments

[WbICHA]

С чего это вдруг? https://www.typescriptlang.org/docs/handbook/relea...
Фича, конечно, далеко не мастхев, но, имхо, хорошая.

[Kolya112151]

Установлено автоматически, при инициализации сторибука, почему не должно быть?
Да и в целом интересно просто почему не работает, ведь в документации typescript есть импорт типов таким образом. Поэтому я и поставил вопрос не о том, как заставить импорт работать, а как заставить воспринимать import type))

[Василий Банников]

WbICHA, о, даже не знал о такой фиче.
Поправил ответ

[Aetae]

Василий Банников, это удобно, чтоб не плодить случайных циклических ссылок меж файлами.
Очень мерзкая хрень эти циклические зависимости, потому что они по началу спокойно работают и множатся, а потом внезапно перестают и сиди - разматывай.)