Styled-components getting Expecting Unicode escape sequence \uXXXX

I’m going through this .net tutorial https://docs.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/3-exercise-create-front-end

I’ve followed the steps and even copy/pasted their code for Main.js:

import React, { useState } from "react";
import styled from "styled-components";

const PizzaFrame = styled.div\`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input\`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)\`
    text-transform: uppercase;
`;

const Save = styled.button\`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

let pizzas = [{
id: 1, name: 'Cheese pizza', description: 'very cheesy'
},
{
id: 2, name: 'Al Tono pizza', description: 'lots of tuna'
}];

const Pizza = ({ pizza }) => {
   const [data, setData] = useState(pizza);
   const [dirty, setDirty] = useState(false);

   function update(value, fieldName, obj) {
   setData({ ...obj, [fieldName] : value });
   setDirty(true);
   }

   function onSave() {
   setDirty(false);
   // make REST call
   }

   return (<React.Fragment>
     <PizzaFrame>
     <h3>
       <Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} /> 
     </h3>
     <div>
       <Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
     </div>
     {dirty ? 
      <div><Save onClick={onSave}>Save</Save></div> : null
     }
     </PizzaFrame>
     </React.Fragment>)
}

const Main = () => {
    const data = pizzas.map(pizza => <Pizza pizza={pizza} />)

    return (<React.Fragment>
     {data}
     </React.Fragment>)
    }

export default Main;

In my VS Code I get errors Invalid character.ts(1127) for everything starting at the "`" here:

const PizzaFrame = styled.div\`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input\`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)\`
    text-transform: uppercase;
`;

const Save = styled.button\`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

and it won’t compile:

Failed to compile.

SyntaxError: C:\..\net_react\pizza-web\src\Main.js: Expecting Unicode escape sequence \uXXXX. (4:30)
  2 | import styled from "styled-components";
  3 |
> 4 | const PizzaFrame = styled.div\`

I also get warnings when running or when doing yarn add styled-components:

warning Pattern ["styled-components@^5.3.5"] is trying to unpack in the same destination "C:\\Users\\...\\AppData\\Local\\Yarn\\Cache\\v6\\npm-styled-components-5.3.5-a750a398d01f1ca73af16a241dec3da6deae5ec4-integrity\\node_modules\\styled-components" as pattern ["styled-components@^5"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > tailwindcss@3.0.23" has unmet peer dependency "autoprefixer@^10.0.2".        
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.0" has unmet peer depend

I added this "styled-components" to my package.json:

{
  "name": "pizza-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

I’m not sure if it’s because "styled-components" is not properly installed?

>Solution :

I don’t know why they are escaping the first backtick, but that’s wrong, this is how you use styled-components:

const PizzaFrame = styled.div`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;

styled-components are based off a JS feature called Tagged Template Literals, that lets you call a function with backticks “ instead of (), so styled.div is just a common JS function: MDN

If you are not sure to have installed correctly styled-components package, just do :

yarn remove styled-components

and

yarn add styled-components