panelbearhq / panelbear-nextjs Goto Github PK

View Code? Open in Web Editor NEW

7.0 7.0 0.0 112 KB

Official Panelbear integration for Next.js.

Home Page: https://www.npmjs.com/package/@panelbear/panelbear-nextjs

License: Apache License 2.0

TypeScript 100.00%

panelbear-nextjs's People

Contributors

Stargazers

Watchers

panelbear-nextjs's Issues

Next.js 13 error

TypeError: (0 , _panelbear_panelbear_nextjs__WEBPACK_IMPORTED_MODULE_4__.usePanelbear) is not a function
    at RootLayout (webpack-internal:///(sc_server)/./app/layout.tsx:23:78)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-server-dom-w

Hey, just finding an error when importing usePanelbear() in app/layout.tsx.
Here's relevant code:

// app/layout.tsx
import { usePanelbear } from '@panelbear/panelbear-nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    usePanelbear(process.env.NEXT_PUBLIC_PANELBEAR_SITE_ID as string, {
        enabled: process.env.NODE_ENV === 'production'
    });
}

Would you be able to have a look into this? Many thanks

Docs for setting up with next.js 13

I think we need some docs for setting up panelbar-nextjs with next.js 13 web app.

Not compatible with React v18 (Next.js v12)

When trying to install with [email protected] there's a peer dependencies error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@"^17.0.2 || ^18.0.0-0" from [email protected]
npm ERR!   node_modules/next
npm ERR!     next@"12.2.2" from the root project
npm ERR!     peer next@"^10 || ^11 || ^12" from @panelbear/[email protected]
npm ERR!     node_modules/@panelbear/panelbear-nextjs
npm ERR!       @panelbear/panelbear-nextjs@"*" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16 || ^17" from @panelbear/[email protected]
npm ERR! node_modules/@panelbear/panelbear-nextjs
npm ERR!   @panelbear/panelbear-nextjs@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/codespace/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/codespace/.npm/_logs/2022-08-03T14_13_31_258Z-debug-0.log

The installation can be forced with --legacy-peer-deps

Next 13 isn't listed as a valid peerDep. I know it's just been released, but I thought I'd post this as a heads up, since it's currently failing my build: https://github.com/ismay/portfolio/pull/96#issuecomment-1291573650

Broken in App directory (Next 13)

Router events are no longer supported in the useRouter imported from next/navigation for the app directory.
I'm currently getting around this by creating a client component as such:

"use client";

import { load, trackPageview } from "@panelbear/panelbear-js";
import { useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";

export default function Panelbear() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const env = process.env.NODE_ENV;

  useEffect(() => {
    if (process.env.NEXT_PUBLIC_PANELBEAR_SITE_ID) {
      load(process.env.NEXT_PUBLIC_PANELBEAR_SITE_ID, {
        debug: env == "development",
      });
    }
  }, []);

  useEffect(() => {
    trackPageview();
  }, [pathname, searchParams]);

  return null;
}

and adding the component to my layout file. Would be great to have an actual solution from this package.

Not compatible with NextJs12

Hey there 👋 !

I've been trying to use the official integration with my project in NextJs12, but it gives an error.
I'm pretty sure it's cause the panelbear plugin expects previous versions of NextJs.

Here's the error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: bk-korona-rate@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"12.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10 || ^11" from @panelbear/[email protected]
npm ERR! node_modules/@panelbear/panelbear-nextjs
npm ERR!   @panelbear/panelbear-nextjs@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/gitpod/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/gitpod/.npm/_logs/2021-11-04T19_06_34_859Z-debug.log

P.S.

Thank you for your product 👍

panelbearhq / panelbear-nextjs Goto Github PK

panelbear-nextjs's People

Contributors

Stargazers

Watchers

panelbear-nextjs's Issues

Next.js 13 error

Docs for setting up with next.js 13

Not compatible with React v18 (Next.js v12)

Next 13 compatibility

Broken in App directory (Next 13)

Not compatible with NextJs12

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs