@emotional/styled with esbuild-import_styled11.default.div不是

Question

我目前正在尝试使用esbuild、react和情感/MUI来构建一个网站。一切都很顺利，除了最后一个障碍是让@emotion/styled中的样式组件正常工作。

uncaught TypeError: import_styled11.default.div is not a function

我从我过去做过的项目(webpack、remix、gatsby等(中复制了这一点，所以我知道它是有效的，所以我认为错误在于我的esbuild配置。

我一直在读关于2021年esbuild自动jsx运行时更改的文章，所以我认为这不应该是个问题，但也许我缺少了一个配置选项？

这可能没有babel或webpack吗？esbuild非常棒，因为我的构建时间目前约为15秒，而webpack的构建时间为1分钟以上。有没有办法让@memotional/styled与esbuild一起工作？

标题.tsx:

import React, { useState } from "react";
import styled from "@emotion/styled";
import {Box} from "@mui/material";

const Header = () => {
return (
<Styles>
<Box component="header">
this should be red
</Box>
</Styles>
);
};
const Styles = styled.div`
header {
background: red;
}
`;
export default Header;

如果有帮助的话：

dev-server.cjs(来自esbuild服务器(与node dev-server.cjs --watch一起运行：

require('esbuild-server')
.createServer(
{
bundle: true,
entryPoints: ['src/app.tsx'],
watch: true,
outfile: "public/bundle.js",
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'development')
},
jsxImportSource: '@emotion/react',
jsxFactory: `jsx`,
},
{
static: 'public',
historyApiFallback: true
}
)
.start();

ts-config.json:

{
"compilerOptions": {
"target": "es2018",
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"module": "commonjs",
"rootDir": "src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}

Answer 1

将服务器文件从dev-server.cjs重命名为dev-server.js时出现以下错误：

require('esbuild-server')
^
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/lukebrown/Projects/rp-react-dashboard/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

在我的项目中，从"type": "module"中删除需求，然后从我的package.json中删除"type": "module"，并运行node dev-server.js --watch，就可以让@memotion/styled工作了。

你可以在这里阅读更多关于"type": "module"的功能。

不知道为什么从我的包中删除这个.json特别有帮助，但很高兴有人发表评论！非常感谢。