NextJS: SyntaxError: Cannot use import statement outside a module

markw · September 18, 2023, 9:13am

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

kamil_grzaba · September 20, 2023, 8:58am

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

markw · September 20, 2023, 9:24am

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"
  }
}

kamil_grzaba · September 20, 2023, 10:51am

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

markw · September 20, 2023, 11:09am

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>
    </>
  );
}

markw · September 29, 2023, 9:42am

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);

markw · October 4, 2023, 12:13pm

For those of you implementing Piwik Pro on Next.JS, transpile-modules is now integrated into Next.JS (as of version 13.1). The changes to next.config.js are different now.

Review this page: Release The End. · martpie/next-transpile-modules · GitHub
Run “npm uninstall next-transpile-modules” (or use yarn - you don’t need this module installed anymore)
Update your next.config.js accordingly.

Here’s my current next.config.js:

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

module.exports = nextConfig;

kamil_grzaba · October 4, 2023, 2:45pm

I’m currently working on next-piwik-pro package update (next 13). It’ll be released soon. Now refactoring examples. Works without transpilePackages parameter also.

markw · October 4, 2023, 3:31pm

Cool, sounds even better!
I’m looking forward to the updated version.

The current version (with the transpilePackages parameter) works perfectly for me. I’ve added tracking to all my pages, as well as some buttons and my contact form. Works like a charm!

kamil_grzaba · October 5, 2023, 7:25am

How do You use it with pages, as they are server components?

markw · October 5, 2023, 7:56am

When I said “tracking pages”, it’s just recording all my pageviews, which is automatic just by adding the PiwikProProvider to _app.tsx. The only other code I added was for tracking some of the buttons (inc. the contact form) on my landingpage.

Topic		Replies	Views
Error with NextJS setup Data collection and tags	9	1778	July 10, 2024
NextJS: "TypeError: Cannot read properties of null (reading 'useContext')" API & integrations	3	8248	January 5, 2023
Unable to install a container into NextJS Project API & integrations	8	1455	November 2, 2022
Problems with NextJS SDK Data collection and tags	5	697	September 28, 2023
Using NextJS PiwikPro package with Storybook API & integrations	4	362	November 17, 2023

NextJS: SyntaxError: Cannot use import statement outside a module

Related topics