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

[jaunty saffron]

When we try and import SpeedInsights component in our /pages/_app.tsx file and deploy through vercel, all pages return the following 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. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { Suspense } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
 ⨯ null
 ⨯ file:///var/task/node_modules/@vercel/speed-insights/dist/next/index.mjs:4
import React, { Suspense } from "react";
                ^^^^^^^^
SyntaxError: Named export 'Suspense' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { Suspense } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
null
Error: Runtime exited with error: exit status 1
Runtime.ExitError

[real pond]

Hi @jaunty saffron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, it seems like you're encountering an issue with named exports when trying to import the Suspense component from react in your Next.js application. This issue has been reported by other users as well, particularly when deploying on Vercel.

The error message suggests that the react module is a CommonJS module, which may not support all module.exports as named exports. It recommends importing via the default export instead. Here's how you can do it:

import pkg from 'react';
const { Suspense } = pkg;

However, please note that this is a general suggestion and might not work in all cases. The issue seems to be related to the specific version of Next.js (14.0.0) you're using, as similar issues have been reported on the Next.js GitHub page (https://github.com/vercel/next.js/issues/57582).

Unfortunately, the extracts do not provide a specific solution to this issue. I would recommend checking the Next.js GitHub page for updates or potential fixes.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: