'Typescript: Unexpected token `interface' w/ React Js

After I npm run dev on local host I get the error: x Unexpected token interface. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, | regexp, ` for template literal, (, or an identifier

This is a snippet of the code:

interface SidebarProps {
      initialSelectedIcon: string
    }
    
    function Sidebar({ initialSelectedIcon }: SidebarProps) {
      const [selected, setSelected] = useState<String>(initialSelectedIcon)
      const { currentAccount, currentUser } = useContext(TwitterContext)
      const router = useRouter()

There are no problems in the Terminal
I converted a bunch of js files to tsx

Here is my tsconfig.json

    {
     "compilerOptions": {
     "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true
   },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", 
    "pages/components/2_Sidebar.tsx"],
    "exclude": ["node_modules"]
 }

Below is my Package.json

   "scripts": {
     "build": "rimraf ./build && tsc",
     "dev": "nodemon",
     "start": "npm run build && node build/index.tsx"
   },
   "keywords": [
     "sanity"
   ],
   "dependencies": {
     "@sanity/base": "^2.29.5",
     "@sanity/core": "^2.29.5",
     "@sanity/default-layout": "^2.29.5",
     "@sanity/default-login": "^2.29.5",
     "@sanity/desk-tool": "^2.29.5",
     "@sanity/eslint-config-studio": "^2.0.0",
     "@sanity/vision": "^2.29.5",
     "eslint": "^8.6.0",
     "prop-types": "^15.7",
     "react": "^17.0",
     "react-dom": "^17.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.21",
     "nodemon": "^2.0.15",
     "rimraf": "^3.0.0",
     "ts-node": "^10.4.0",
     "typescript": "^4.6.2"
   }
 }

I think there might be a problem with the tsconfig.json or package.json

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Typescript: Unexpected token `interface' w/ React Js

Sources

Related Questions