Next.js: SyntaxError: Unexpected token 'export'

Following the installation in readme with Next.js v9.3.6 (latest) has led to the following issue. SyntaxError: Unexpected token 'export' Looks like a cjs module not working in React. 🤔

ERROR (CLICK TO EXPAND!)

SyntaxError: Unexpected token ‘export’ (anonymous function) /Users/ahmadawais/…/node_modules/web-vitals/dist/web-vitals.min.js:1 Module._compile internal/modules/cjs/loader.js:892:18 Module._extensions…js internal/modules/cjs/loader.js:973:10 Module.load internal/modules/cjs/loader.js:812:32 Function.Module._load internal/modules/cjs/loader.js:724:14 Module.require internal/modules/cjs/loader.js:849:19 require internal/modules/cjs/helpers.js:74:18 web-vitals webpack:/external “web-vitals”:1

1 | module.exports = require(“web-vitals”); View compiled webpack_require ./webpack/bootstrap:21 18 | // Execute the module function 19 | var threw = true; 20 | try { 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require); | ^ 22 | threw = false; 23 | } finally { 24 | if(threw) delete installedModules[moduleId]; View compiled Module…/pages/index.js /_next/development/server/static/development/pages/index.js:4450:69 webpack_require ./webpack/bootstrap:21 18 | // Execute the module function 19 | var threw = true; 20 | try { 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require); | ^ 22 | threw = false; 23 | } finally { 24 | if(threw) delete installedModules[moduleId]; View compiled 3 /_next/development/server/static/development/pages/index.js:4996:18 webpack_require ./webpack/bootstrap:21 18 | // Execute the module function 19 | var threw = true; 20 | try { 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require); | ^ 22 | threw = false; 23 | } finally { 24 | if(threw) delete installedModules[moduleId]; View compiled ▶ 10 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

[philipwalton]

@ahmadawais I just released v0.2.1, which should fix this. Please give it a try and let me know if you’re still having issues.

[housseindjirdeh]

@ahmadawais FYI web-vitals was included into Next.js core and merged upstream: https://github.com/zeit/next.js/pull/12650

With version 9.4, you’ll only need to create a reportWebVitals function in _app.js to track web vital metrics (among other custom performance marks and measures)

The Measuring Performance page in the docs explains this in detail 😃