Code Monkey home page Code Monkey logo

next-piwik-pro's Issues

"next" should be a peer dependency, not a dependency

Currently having "next" as a dependency can result in having multiple "next" versions in the consumer app (app which utilizes the next-piwik-pro package). It can lead to not-building app.

I've described the details in the PR: #16.

SyntaxError: Cannot use import statement outside a module

I set up Piwik PRO with next.js, according to the following official instructions - https://developers.piwik.pro/en/latest/data_collection/web/frameworks/Piwik_PRO_Library_for_NextJS.html

But immediately when I start the dev server, I get this import error:

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

SyntaxError: Cannot use import statement outside a module

I also created a new and blank next.js installation without any modifications, still get the same error.

Empty next example repo: https://github.com/ciruz/next-piwik-error

Any ideas? Thanks

Issue importing piwik pro [ERR_UNSUPPORTED_DIR_IMPORT]

Hi there,

I'm on next 13.1.5, and on next build I'm getting an error about directory import. I'm using Next pages if that's important.

"@piwikpro/next-piwik-pro": "^3.1.0",
"next": "13.1.5",

The error is ..Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/myProject/node_modules/@piwikpro/next-piwik-pro/dist/core' is not supported resolving ES modules imported from /myProject/node_modules/@piwikpro/next-piwik-pro/dist/index.js

I tried transpiling the package transpilePackages: ["@piwikpro/next-piwik-pro"] in next.config.js but that yields another error:

..ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'myProject/node_modules/@piwikpro/react-piwik-pro/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Any ideas on how to resolve?

Piwik stops working after page change on NextJS application

Hello,

I have a NextJS (v13.2.4) application that uses this library to add Piwik. The consent manager opens up OK on page load and we also have a separate button that opens up the dialog again if you want to change your consent.

The problem is that after changing pages the button stops working and I get the following error message in the browser console.

Uncaught Error: Element #ppms_cm_privacy_settings_styles already exists at e.addStyleElement (48293c16-c4dd-4851-a69a-d94482895295.js:8:121595) at e.addWidgetStyles (48293c16-c4dd-4851-a69a-d94482895295.js:8:104218) at MutationObserver.setupNewWidget (48293c16-c4dd-4851-a69a-d94482895295.js:8:103593)

A <style> element with that id is added to the root of the page when the provider loads, but it seems like when changing pages the element isn't reloaded and therefore it gives out the above error.

image

NextJS 13 and app dir (loader issues, e.g tailwind)

By following the instructions for NextJS it basically works but it missconfigures other loaders, e.g Tailwind.

So by adding

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

const withTM = require('next-transpile-modules')(['@piwikpro/next-piwik-pro'])
const nextConfig = {
  /* Your Next.js config */
}
module.exports = withTM(nextConfig)

and then npm run dev

- error ./app/globals.css
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

typescript error with containerId

This code example from here:

<PiwikProProvider
  containerUrl={process.env.NEXT_PUBLIC_CONTAINER_URL}
  containerId={process.env.NEXT_PUBLIC_CONTAINER_ID}
>
  <Component {...pageProps} />
</PiwikProProvider>

(see https://github.com/PiwikPRO/next-piwik-pro#_apptsx-1 )

gives an TypeScript error, because it needs to be a string https://github.com/PiwikPRO/next-piwik-pro/blob/master/src/types/index.ts#L5, but the Node global is defined as string | undefined, see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node/globals.d.ts#L296

Separate version of Next.js installed when next-piwik-pro is installed

Steps to reproduce:

  • Install Next.js
  • Install @piwikpro/next-piwik-pro

Expected result:
@piwikpro/next-piwik-pro uses existing copy of Next.js

Actual result:
next-piwik-pro installs its own version of Next.js 12

Suggested fix:

It appears that the only reason Next.js is a dependency of @piwikpro/next-piwik-pro is this line:

next-piwik-pro/src/core/index.tsx

Line 2 in 6979862

import Script from 'next/script'

Given that:

I believe it's safe to:

  • Move next to peerDependencies,
  • Loosen version requirements to ^11.0.0 || ^12.0.0 || ^13.0.0, every version of Next.js supporting next/script according to its Version History.

Workaround:

With Yarn:

  "resolutions": {
    "@piwikpro/next-piwik-pro/next": "<your_package_version>"
  },

SyntaxError: Cannot use import statement outside a module

As I’m new to Piwik, I just installed it in my existing Next.JS project. I setup the PiwikProProvider in _app.tsx and then added PageViews to each of my pages - just to test the basics.

When testing, I immediately get this error. I’ve tried a couple of workarounds, but can’t seem to find one. Disabling the pageviews doesn’t help - this error comes straight from setting up the provider in _app.tsx. Any ideas or thoughts?

/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

addEcommerceItem parameters are not declared optional

Hey hey! I found an issue with the typescript declaration of the addEcommerceItem parameters. According to your docs only productSKU is required. All the others are optional. However, your typescript declaration says all of them are required:

Screenshot 2023-11-13 at 17 29 17

export declare function addEcommerceItem(productSKU: string, productName: string, productCategory: string | string[], productPrice: number, productQuantity: number): void;

Did I oversee something or does this has to be fixed?

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.