I recently started working on a brand new "next.js" project and was eager to dive into coding. However, I found myself stuck for hours trying to resolve the following error message.
To kick things off, I decided to use a reference code snippet which looked like this -
import styled from "styled-components";
function Sidebar() {
return {
<Container>
<h1> Sidebar </h1>
</Container>;
}
}
export default sidebar;
const Container = styled.div;
The specific error I encountered is as follows:
x Unexpected token `<` (jsx tag start). Expected identifier, string literal, numeric literal or [ for the computed key
,----
7 | <Container>
: ^
`----
Naturally, I turned to Google for answers and tried tweaking various configuration files. While there were several suggested solutions, none seemed to work out for me thus far. My suspicion is that the issue lies within the babel setup, but at the moment, I'm essentially navigating in the dark.
This is how my .babelrc file looks like:
{
"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
],
}
If anyone has any insights or guidance on tackling this problem, please share your thoughts.