I am trying to implement speed insights on a Vercel deployment and when building it’s giving me the following error:
<code>Failed to compile.
./node_modules/@vercel/speed-insights/dist/next/index.mjs
Module not found: Can't resolve 'next/navigation.js' in '/vercel/path0/node_modules/@vercel/speed-insights/dist/next'
</code>
<code>Failed to compile.
./node_modules/@vercel/speed-insights/dist/next/index.mjs
Module not found: Can't resolve 'next/navigation.js' in '/vercel/path0/node_modules/@vercel/speed-insights/dist/next'
</code>
Failed to compile.
./node_modules/@vercel/speed-insights/dist/next/index.mjs
Module not found: Can't resolve 'next/navigation.js' in '/vercel/path0/node_modules/@vercel/speed-insights/dist/next'
I’ve installed the necessary dependencies in my project using
<code>yarn add @vercel/speed-insights
</code>
<code>yarn add @vercel/speed-insights
</code>
yarn add @vercel/speed-insights
and have included the SpeedInsights component in _app.tsx with the following code:
<code>import React from 'react';
import '../styles/global.css';
import Head from 'next/head';
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next';
const App = ({ Component, pageProps }) => {
const inputRef = React.useRef<HTMLInputElement>(null);
const onClickAnywhere = () => {
inputRef.current.focus();
};
return (
<>
<Head>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
key="viewport"
maximum-scale="1"
/>
</Head>
<div
className="text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-
full md:text-base"
onClick={onClickAnywhere}
>
<main className="bg-light-background dark:bg-dark-background w-full h-full p-2">
<Component {...pageProps} inputRef={inputRef} />
</main>
</div>
<Analytics />
<SpeedInsights />
</>
);
};
</code>
<code>import React from 'react';
import '../styles/global.css';
import Head from 'next/head';
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next';
const App = ({ Component, pageProps }) => {
const inputRef = React.useRef<HTMLInputElement>(null);
const onClickAnywhere = () => {
inputRef.current.focus();
};
return (
<>
<Head>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
key="viewport"
maximum-scale="1"
/>
</Head>
<div
className="text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-
full md:text-base"
onClick={onClickAnywhere}
>
<main className="bg-light-background dark:bg-dark-background w-full h-full p-2">
<Component {...pageProps} inputRef={inputRef} />
</main>
</div>
<Analytics />
<SpeedInsights />
</>
);
};
</code>
import React from 'react';
import '../styles/global.css';
import Head from 'next/head';
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next';
const App = ({ Component, pageProps }) => {
const inputRef = React.useRef<HTMLInputElement>(null);
const onClickAnywhere = () => {
inputRef.current.focus();
};
return (
<>
<Head>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
key="viewport"
maximum-scale="1"
/>
</Head>
<div
className="text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-
full md:text-base"
onClick={onClickAnywhere}
>
<main className="bg-light-background dark:bg-dark-background w-full h-full p-2">
<Component {...pageProps} inputRef={inputRef} />
</main>
</div>
<Analytics />
<SpeedInsights />
</>
);
};
Any help would be appreciated