TypeError: _piwikpro_react_piwik_pro__WEBPACK_IMPORTED_MODULE_9___default(...).initialize is not a function

[niklasdohmen]

Hello! Somehow I get the webpack error even though it has been working for a few weeks now. I didn't changed something (neither webpack version, react-piwik package version or the relevant code parts).

TypeError: _piwikpro_react_piwik_pro__WEBPACK_IMPORTED_MODULE_9___default(...).initialize is not a function`

The relevant code follows the documentation, is initialized in the _app.tsx and looks like that:

`import PiwikPro from '@piwikpro/react-piwik-pro';
....
PiwikPro.initialize(PIWIK_PRO_APP_ID, PIWIK_PRO_INSTANCE);

I am using React 17.0.2 with Next.js 12.2.5. I already tried different ways of importing the module, but that didn't work out.

Does anybody know what the issue is here?

[danieltwork]

@niklasdohmen

Hi, thanks for the notification. We tried to reproduce the problem, but with the standard react configuration the problem does not seem to occur.

Would you be willing to show us how you build your application? Maybe some minimal version of the webpack configuration file?

At the same time, I would like to inform you that we have released a new library to help integrate our product with NextJS applications. https://www.npmjs.com/package/@piwikpro/next-piwik-pro

[matthiasbruns]

I have the same problem when trying to use react-piwik-pro with next.js , so I tried using next-piwik-pro. The repo is not open to file a bug report, that's why I am doing this here now

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 (
    <>
      <PiwikProProvider accountName="accountName" containerId="43e4bca4-e220-43df-acfc-40fef7e25105">
        <Component {...pageProps} />
      </PiwikProProvider>
    </>
  );
}

export default App;

I wish you had a public repo for the lib.

[niklasdohmen]

@matthiasbruns Same here, also tried the next-piwik-pro package and got the same "Element type is invalid" error...

[barlima]

Facing the same errors for both react-piwik-pro and next-piwik-pro. Any progress on that?

[matthiasbruns]

Well. Drop Piwik. That's what I did. 28days and no response 🤣

[danieltwork]

I have the same problem when trying to use react-piwik-pro with next.js , so I tried using next-piwik-pro. The repo is not open to file a bug report, that's why I am doing this here now

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 (
    <>
      <PiwikProProvider accountName="accountName" containerId="43e4bca4-e220-43df-acfc-40fef7e25105">
        <Component {...pageProps} />
      </PiwikProProvider>
    </>
  );
}

export default App;

I wish you had a public repo for the lib.

The repository has been made public. Link

Could you try the solution we wrote about in the README of the next-piwik-pro library? I have verified that it solves your problem, however I would like confirmation from you.

Solution

@niklasdohmen @barlima

[barlima]

@danieltwork it helped, thanks!