Analytics and SpeedInsights fail to build

Help
1

I’m pretty new to webdev, but was able to get the site up and running. I’m running a react app and when running npm build run after adding Analytics and SpeedInsights my builds fail. This is what I’ve done.

import { SpeedInsights } from "@vercel/speed-insights/next"
import { Analytics } from "@vercel/analytics/react"

function App() {


  return (
    <div className="container mx-auto">
   ...
      <SpeedInsights />
    </div>
  );
}

The error I’m getting is

error during build:
node_modules/@vercel/speed-insights/dist/next/index.mjs (129:9): "useParams" is not exported by "__vite-optional-peer-dep:next/navigation.js:@vercel/speed-insights", imported by "node_modules/@vercel/speed-insights/dist/next/index.mjs".
file: /Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/@vercel/speed-insights/dist/next/index.mjs:129:9

127:   const setScriptRoute = useRef(null);
128:   useEffect(() => {
129:     if (!setScriptRoute.current) {
              ^
130:       const script = injectSpeedInsights({
131:         framework: props.framework || "react",

    at getRollupError (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at error (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/parseAst.js:388:42)
    at Module.error (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:13827:16)
    at Module.traceVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:14275:29)
    at ModuleScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:11990:39)
    at ReturnValueScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at FunctionBodyScope.findVariable (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at Identifier.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:6908:40)
    at CallExpression.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:4775:23)
    at CallExpression.bind (file:///Volumes/macdev/other/Hots-Cots_web/hotscotapp/node_modules/rollup/dist/es/shared/node-entry.js:9135:15)
2

Hey,

are you following this instruction? It sounds like you are importing Next.js specific package in non Next.js app

2 Likes
3

Hey @arbyruns!

@swarnava is spot on here :dart:

I also wanted to share our Next.js starter templates, they may be useful for you to see some examples. :smiley:

Let us know if you have any other questions!

2 Likes
4

Ah thank you @swarnava! I think that did it. Thank you @pawlean!

1 Like
5

You’re welcome! :smiley: Glad that was helpful.

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.