如何解决nextJS项目中的意外令牌错误？
如何解决nextJS项目中的意外令牌错误？
提问于 2022-08-28 14:12:13
我设置了一个新的"next.js“项目，并希望开始编写代码，但我现在被以下错误信息困住了几个小时。
我取了一个参考代码，如下所示
import styled from "styled-components";
function Sidebar() {
return {
<Container>
<h1> Sidebar </h1>
</Container>
}
}
export default sidebar;
const Container = styled.div;这是一个错误：
x Unexpected token `< (jsx tag start)`. Expected identifier, string literal, numeric literal or [ for the computed key
,----
7 | <Container>
: ^
`----当然，我做了我的谷歌研究，并在不同的配置文件中修补。有许多不同的解决方案，但没有一个对我有效(到目前为止)。我的猜测是，这与babel配置有关，但我正在黑暗中摸索。
我的.babelrc文件：
{
"presets": ["env"],
"plugins": [
["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
"transform-object-rest-spread",
// "@babel/plugin-proposal-nullish-coalescing-operator", // TODO: update to babel 7
],
}看看这方面的指导。
Stack Overflow用户
发布于 2022-08-28 14:32:15
当返回一个JSX表达式时，必须使用括号来包含JSX，而不是大括号。
function Sidebar() {
return (
<Container>
<h1> Sidebar </h1>
</Container>
);
}更多地阅读为什么return表达式中的括号是重要的：https://hashnode.com/post/why-some-returns-in-react-use-round-brackets-while-some-use-curly-brackets-cjgjul2r7002xwcs222e4hp2s
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73519399
复制相关文章
相似问题
腾讯云开发者
