Turbopack giving undefined for `React.Component`

Question

I'm trying to create a component class with a Turbopack TSX project:

import React from 'react';
import baseResolution from '@/lib/baseResolution';

export default class GameContainer
    extends React.Component<{}, {resizeListener: Function | null}>
{
    // ...
}

So far, I've not modified anything in package.json. When I run npm run dev and access the web page, I get:

TypeError: Class extends value undefined is not a constructor or null

at (/app/GameContainer.tsx:5:18)

at Module.[project-with-next]/app/GameContainer.tsx (ecmascript, rsc) (.next\server\app\chunks\rsc\app_layout.tsx.js:165:3)

at (.next\server\app\chunks\ssr_6c0b57.js:67894:21)

...

What am I missing? Here's the package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "dev:tailwind": "concurrently \"next dev --turbo\" \"npm run tailwind -- --watch\"",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "tailwind": "tailwindcss -i styles/globals.css -o styles/dist.css",
    "format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
    "postinstall": "npm run tailwind"
  },
  "prettier": {
    "arrowParens": "always",
    "semi": true,
    "trailingComma": "all",
    "singleQuote": true
  },
  "dependencies": {
    "clsx": "1.2.1",
    "concurrently": "7.5.0",
    "next": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "6.0.0-beta.2",
    "styled-jsx": "5.1.0",
    "use-count-up": "3.0.1"
  },
  "devDependencies": {
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.7",
    "eslint": "8.19.0",
    "eslint-config-next": "latest",
    "postcss": "^8.4.14",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.12",
    "tailwindcss": "^3.1.6",
    "typescript": "4.7.4"
  }
}

Turbopack giving undefined for `React.Component`

0 Answers0