如何解決 nextJS 項目中的 Unexpected Token Error？

Question

我建立了一個新的“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
  ],
}

看看這方面的指導。

Answer 1

您必須在return語句中使用()大括號。

return (
  <Container>
    <h1> Sidebar </h1>
  </Container>
);

Answer 2

返回 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