Warning in Next 14 - Githubissues

Escalion86 commented 6 months ago

Next v14.0.4 next-yandex-metrica v1.1.1

Warning: Cannot render <noscript> outside the main document. Try moving it into the root <head> tag.

if i move to Head, then wrapper is not wrapper... functions like reachGoal is not working

layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="ru" className="scroll-smooth">
        <body>
          <YaMetricaWrapper>
            {children}
          </YaMetricaWrapper>
        </body>
    </html>
  )
}

YaMetrikaWrapper.js 'use client'

import { YandexMetricaProvider } from 'next-yandex-metrica'

export const YaMetricaWrapper = ({ children }) => (
  <YandexMetricaProvider
    tagID={***} // my tag here
    initParameters={{
      clickmap: true,
      trackLinks: true,
      accurateTrackBounce: true,
    }}
  >
    {children}
  </YandexMetricaProvider>
)

export default YaMetricaWrapper

reapziq commented 6 months ago

Hi! I've created a release that exposes the ym object, which has a signature similar to the native one. This way, you can leave the provider in the head while importing ym directly on demand. Let me know if that solves it for you 🙂

reapziq commented 6 months ago

I will close it for now. Please reopen it if you still have issues.

di-sukharev commented 5 months ago

i use latest nextjs with the /app folder, can i call ym(id, "reachGoal", "smth") in a BE app route? build fails when i call the ym(.....) in an api route:

> Build error occurred
Error: Failed to collect page data for /api/bot
    at /node_modules/next/dist/build/utils.js:1217:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Creating an optimized production build  .   Collecting page data  .error: script "build" exited with code 1

here is my function:

import { db } from "@/prisma/pool";
import { ym } from "next-yandex-metrica";

export async function reachGoal(goal: string, tgId?: string | number) {
  try {
    const user = await db.user.findUnique({
      where: {
        tgId: String(tgId),
      },
      select: {
        tgId: true,
        startParam: true,
      },
    });

    const options = user
      ? {
          params: {
            tgId: user.tgId,
            startParam: user.startParam,
          },
          userParams: {
            tgId: user.tgId,
            startParam: user.startParam,
          },
        }
      : undefined;

    ym(
      Number(process.env.NEXT_PUBLIC_YANDEX_METRICS_ID!),
      "reachGoal",
      goal,
      options
    );
    console.log("LOG_YM_REACH_GOAL", goal);
  } catch (error) {
    console.error("CANT_LOG_YM_REACH_GOAL", goal, error);
  }
}

i then import in in api/any_file.ts and it fails

let me create a separate issue

reapziq / next-yandex-metrica

Warning in Next 14 #11