Adding Matomo tracker to React App with Typescript

General questions
1

Hello,

I apologize if this has beed answered before, but I couldn’t find any answer to how to fix this. I am very new to Matomo so maybe I’m missing something… I am following all the steps on the official NPM page and I get this result:

  1. Create a new React app: create-react-app app --template typescript
  2. npm i -S @datapunt/matomo-tracker-react
  3. index.tsx:

import { createInstance, MatomoProvider } from “@datapunt/matomo-tracker-react”;

const instance = createInstance({
urlBase: ‘http://localhost:3000’,
siteId: 1
})

ReactDOM.render(
<React.StrictMode>



</React.StrictMode>,
document.getElementById(‘root’)
);

  1. App.tsx

import { useMatomo } from “@datapunt/matomo-tracker-react”;

function App() {

const { trackPageView, trackEvent } = useMatomo();

trackPageView({
documentTitle: ‘Index page’
});

const handleOnClick = () => {
trackEvent({ category: ‘sample-page’, action: ‘click-event’ })
}

return (
Click me
)
}

export default App;

  1. Run the app.

Every time I run the app I get a bunch of these console logs:

…
WARNING in ./node_modules/@datapunt/matomo-tracker-react/es/utils/useOutboundClickListener.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from ‘C:\Users\leikin\WebstormProjects\matomo-app\node_modules@datapunt\matomo-tracker-react\src\utils\useOutboundClickListener.tsx’ file: Error: ENOENT: no such file or directo
ry, open ‘C:\Users\leikin\WebstormProjects\matomo-app\node_modules@datapunt\matomo-tracker-react\src\utils\useOutboundClickListener.tsx’
@ ./node_modules/@datapunt/matomo-tracker-react/es/useMatomo.js 3:0-72 14:6-30
@ ./node_modules/@datapunt/matomo-tracker-react/es/index.js 4:0-51 4:0-51
@ ./src/index.tsx 9:0-80 11:17-31 16:33-47
…

Can anyone sine some light as to why this is happening?
Any help will be very much appreciated.

2

Just FYI,

@datapunt/matomo-tracker-react is not “the official NPM” module of Matomo (there doesn’t exist one maintained by the Matomo team), but is maintained by the city of Amsterdam. Nevertheless it seems like the best way to integrate Matomo with react.

For your issue, you might want to look here:

and

1 Like