Плагин babel для стилизованных компонентов в приложении create-response-app с TypeScript?

Могу ли я использовать плагин babel для стилизованных компонентов в приложении create-react-app, которое использует TypeScript?

Я читал в документации, что существует «макрос, [который] включает в себя всю функциональность [] плагина babel, позволяя инструментам без извлечения обрабатывать Babel часть процесса сборки».

Я пытался:

npm install babel-plugin-macros

а также

import styled from 'styled-components/macro';
const Div = styled.div`
`;

На npm run start в приставке получаю

Compiled with warnings.

./node_modules/babel-plugin-macros/dist/index.js
62:46-53 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
8:17-34 Critical dependency: the request of a dependency is an expression

При посещении приложения в браузере получаю

TypeError: __WEBPACK_IMPORTED_MODULE_1_styled_components_macro__.a.div is not a function

Вам удалось это исправить?

Ashley Williams 11.02.2019 13:51

Мне не удалось это исправить

user1283776 11.02.2019 13:58
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
4
2
788
1

Ответы 1

Я столкнулся с той же проблемой. Я пытался запустить tsc -b -w (смотреть) поверх монорепозитория, одновременно выполняя react-scripts start в проекте create-react-app, чтобы я мог смотреть проекты и создавать апстрим, если они меняются.

В конце концов я понял, что причина того, что это не работает, заключалась в том, что у меня были стилизованные компоненты, определенные в файле .ts, а не в файле .tsx, например, в файле Menu.styles.ts. Когда я переименовал его в Menu.styles.tsx, одновременные часы + start работали стабильно.

Надеюсь, это кому-то поможет.

Другие вопросы по теме