NextJS: SyntaxError: Cannot use import statement outside a module

I’m new to Piwik Pro, and just now signed up and added the initial tracker code to my NextJS application. Nothing fancy - just the PiwikProProvider in _app.tsx and Pageviews on each of my pages (note: I’ve disabled those again for troubleshooting).

Upon testing locally, I immediately get this error from importing the PiwikProProvider. Code: (removed the container id and website url, but they’re correct).

import PiwikProProvider from "@piwikpro/next-piwik-pro";
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <PiwikProProvider
        containerId=“mycontainerid"
        containerUrl="https://mywebsite.com/"
      >
        <main>
          <Component {...pageProps} />
        </main>
      </PiwikProProvider>
    </>
  );
}

Here’s the error message I get:

/Users/myusername/Projects/next-project/node_modules/@piwikpro/next-piwik-pro/index.js:1
import { PiwikProProvider, usePiwikPro } from './core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at @piwikpro/next-piwik-pro (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:183:18)
    at __webpack_require__ (/Users/myusername/Projects/next-project/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/_app.tsx:13:82)
    at ./src/pages/_app.tsx (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:75:1)
    at __webpack_require__ (/Users/myusername/Projects/next-project/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:21:80)
    at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:53:1)
    at __webpack_require__ (/Users/myusername/Projects/next-project/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:292:39)
    at /Users/myusername/Projects/next-project/.next/server/pages/_document.js:293:28
    at Object.<anonymous> (/Users/myusername/Projects/next-project/.next/server/pages/_document.js:296:3)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at requirePage (/Users/myusername/Projects/next-project/node_modules/next/dist/server/require.js:112:75)
    at /Users/myusername/Projects/next-project/node_modules/next/dist/server/load-components.js:76:65
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async loadComponentsImpl (/Users/myusername/Projects/next-project/node_modules/next/dist/server/load-components.js:75:33)
    at async DevServer.findPageComponentsImpl (/Users/myusername/Projects/next-project/node_modules/next/dist/server/next-server.js:439:36)
- error /Users/myusername/Projects/next-project/node_modules/@piwikpro/next-piwik-pro/index.js:1

Hi,
Please share your next.config.js and package.json (I’m interested in next version).

Sure, here we go. (Note: I’ve removed Piwik for now… I’ve embedded it using plain JS in _document.tsx, which is a workaround for now).
Next.config.js:

const nextConfig = {
  reactStrictMode: true,
};
module.exports = nextConfig;

Package.json:

{
  "name": “my-app",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint",
    "start": "next start -H 0.0.0.0 -p ${PORT:-8080}"
  },
  "dependencies": {
    "@types/node": "^20.5.4",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.47.0",
    "eslint-config-next": "^13.4.19",
    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rss-parser": "^3.13.0",
    "sharp": "^0.32.5",
    "typescript": "^5.1.6"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3"
  }
}

Try config presented below:

/** @type {import('next').NextConfig} */

const withTM = require('next-transpile-modules')(['@piwikpro/next-piwik-pro'])

const nextConfig = {
  /* Your Next.js config */
}

module.exports = withTM(nextConfig)

According to: link

Ok, I’ve reinstalled Piwik according to that link and the error came back. Just this code is enough to trigger the error for me:
next.config.js:

/** @type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")(["@piwikpro/next-piwik-pro"]);
const nextConfig = {
  reactStrictMode: true,
};
module.exports = nextConfig;

package.json:

{
  "name": “my-app",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint",
    "start": "next start -H 0.0.0.0 -p ${PORT:-8080}"
  },
  "dependencies": {
    "@piwikpro/next-piwik-pro": "^1.0.4",
    "@types/node": "^20.5.4",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.47.0",
    "eslint-config-next": "^13.4.19",
    "next": "^13.4.19",
    "next-transpile-modules": "^10.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rss-parser": "^3.13.0",
    "sharp": "^0.32.5",
    "typescript": "^5.1.6"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3"
  }
}

_app.tsx:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import PiwikProProvider from "@piwikpro/next-piwik-pro";
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <PiwikProProvider
        containerId=“my-actual-container-id"
        containerUrl="https://mywebsite.com/"
      >
        <main className="scroll-smooth">
          <Component {...pageProps} />
        </main>
      </PiwikProProvider>
    </>
  );
}

Let me give the answer myself. Coming back to this a week later - I can now see my mistake, which was this line. The right one should have been:

module.exports = withTM(nextConfig);
1 Like