带有TypeScript的create-react-app中的样式组件babel插件？

Question

我可以在使用TypeScript的create-react-app应用程序中使用样式化组件babel插件吗？

我在文档中读到，有一个“宏[整合了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

Answer 1

我遇到了同样的问题。我试图在monorepo上运行tsc -b -w（监视），而同时在react-scripts start项目中运行create-react-app，以便我可以监视项目并在上游更改项目时进行构建。

我最终意识到不起作用的原因是因为我在.ts文件而不是.tsx文件（例如Menu.styles.ts文件）中定义了样式化的组件。当我将其重命名为Menu.styles.tsx时，并发监视+ start一直工作。

希望这对某人有帮助。