Problems with NextJS SDK

Data collection and tags
1

@Piotrek

Your SDK does not work - it fails with:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

How to reproduce:

  1. npx create-next-app@latest --ts
  2. npm install @piwikpro/next-piwik-pro
  3. replace contents of _app.tsx with the provided content below
  4. npm run dev

`
import PiwikProProvider from “@piwikpro/next-piwik-pro”;
import { AppProps } from “next/app”;

function App({ Component, pageProps }: AppProps) {
return (
<>

<Component {…pageProps} />

</>
);
}

export default App;
`

I wish you had a public repo for the lib.

2

@matthiasbruns we will try to reproduce your issue and get back with feedback.

We are also working on open-sourcing the library and I’ll share a link to the repository once it’s public.

3

Experiencing the same issue. Unable to proceed with Piwik PRO implementation using the SDK.

4

@matthiasbruns @oalsing

We released version 1.0.4 which should fix this issue, could you check again?
We also added some relevant information to the README here: https://www.npmjs.com/package/@piwikpro/next-piwik-pro#basic-setup

Our Next library is now also open-source. The repository is available here: GitHub - PiwikPRO/next-piwik-pro: Library for implementing Piwik PRO in Next.js web applications

5

After adapting the config in Next13 (with app dir)
Somehow css loader is missconfigured and global.css does not accept tailwind global imports anymore.

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

Import trace for requested module:
./app/globals.css

If I remove the css, it works.

6

I am also facing same problem. Any solution ?

Got error after adding below configuration in next.config.js

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