Next.js 14.0.0 /pages app: SpeedInsights import causes breaking changes

[aydangoon]

When we try and import SpeedInsights component in our /pages/_app.tsx file and deploy through vercel, all pages return the error

file:///var/task/node_modules/@vercel/speed-insights/dist/next/index.mjs:4
import React, { Suspense } from "react";
                ^^^^^^^^
SyntaxError: Named export 'Suspense' not found.

In our package.json:

    "@vercel/speed-insights": "1.0.3",
    "next": "14.0.0",
    "react": "^18",
    "react-dom": "^18",
     ...

[aydangoon]

This was a bug in next that was patched in 14.0.4. After migrating everything works!