1

I'm trying to learn some of the new features in React 18, such as the SuspenseList and new useId hook, but I seem to be getting the same error over and over:

Module '"react"' has no exported member 'SuspenseList'.  TS2305

This is what my package.json looks like:

  "dependencies": {
    "bootstrap": "^5.1.1",
    "history": "^5.0.1",
    "react": "^18.0.0-rc.0",
    "react-dom": "^18.0.0-rc.0",
    "react-error-boundary": "^3.1.3",
    "react-router-dom": "^6.0.0-beta.5",
    "swr": "^1.0.1",
    "web-vitals": "^1.1.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.27",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.9",
    "prettier": "^2.4.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.4.3"
  },

I have no clue what to do at this point, as I've installed the RC version of React 18, which should be the latest according to the Working Group GitHub discussion board.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
DNH
  • 47
  • 1
  • 8
  • import { Suspense, SuspenseList } from "react"; – DNH Dec 15 '21 at 10:38
  • yes all prerequistes are done and have worked fine until I'm trying to import the useId hook or SuspenseList from 'react' – DNH Dec 15 '21 at 10:43
  • So am I importing SuspenseList wrong? Since it says that 'react' doesn't have SuspenseList ? – DNH Dec 15 '21 at 10:57
  • 1
    That's a _TypeScript_ error - you have `@types/react` at v17, which won't include the new v18 types. – jonrsharpe Dec 15 '21 at 10:57

2 Answers2

9

If anyone is still facing this issue Please install the latest version of @types/react More info in the attached npm link npm i @types/react

Adam ElHawary
  • 106
  • 1
  • 4
2

You're getting that error from the TypeScript compiler because, even though you've installed react@next, you're still using @types/react@17. SuspenseList does exist in the implementation, but the compiler doesn't know that.

Although there's no equivalent @types/react@next install, @types/react does include:

  • next.d.ts (types which will definitely be in v18); and
  • experimental.d.ts (types which are currently in experimental builds).

The source code of the latter (as SuspenseList and the whole concurrent mode API is still experimental) tells you how to use these types in a project:

These are types for things that are present in the experimental builds of React but not yet on a stable build.

Once they are promoted to stable they can just be moved to the main index file.

To load the types declared here in an actual project, there are three ways. The easiest one, if your tsconfig.json already has a "types" array in the "compilerOptions" section, is to add "react/experimental" to the "types" array.

Alternatively, a specific import syntax can to be used from a TypeScript file. This module does not exist in reality, which is why the {} is important:

import {} from 'react/experimental'

It is also possible to include it through a triple-slash reference:

/// <reference types="react/experimental" />

Either the import or the reference only needs to appear once, anywhere in the project.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
  • Thanks a lot for the elaborated answer. I do find that I still have this error, having added "types": ["react-dom/next", "react/next"] to my tsconfig.tsx and if @types/react does include: next.d.ts (types which will definitely be in v18); and experimental.d.ts (types which are currently in experimental builds). Then how come you're saying that my current types don't include these you mention? What do I type to get the latest types? As I have installed the latest types using a command I found, but that apparently is only for React17 – DNH Dec 15 '21 at 11:21
  • @ClunkyKong `"react/next"`, if you look at what's actually in that file, _doesn't_ include `SuspenseList` - it's in `"react/experimental"`. Note the update to the answer. – jonrsharpe Dec 15 '21 at 11:22
  • ah thank you, had a few pieces fall together just now. Added the react/experimental thing to the types in tsconfig, but am now getting this error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `UserDetails import is as follows: import { Suspense, SuspenseList } from "react"; – DNH Dec 15 '21 at 11:29
  • it is exported through "export function UserDetails" – DNH Dec 15 '21 at 11:30
  • @ClunkyKong that seems like a separate error, it's happening at a completely different time (the one you report in the Q is from compile time, whereas that's at runtime). I'd suggest researching, and then if needed asking, it separately. That said, given that part of the API is experimental, maybe you need to install `react@experimental` too? – jonrsharpe Dec 15 '21 at 11:32
  • True it is a seperate error that has occured at runtime. I'm going to just see how much I can break it and take your advice. Thanks for the correct answer to the original Q :) – DNH Dec 15 '21 at 11:49
  • 2
    -after running npm install react@experimental react-dom@experimental it helped installing the experimental build of the experimental build and runs smooth now – DNH Dec 15 '21 at 11:51