Next.js Discord

Discord Forum

telegram miniapp how fix?

Answered
Coffee without sugar🤍 posted this in #help-forum
Open in Discord
Coffee without sugar🤍OP
i trying make auto login via initdata but when i trying this part of code

// hook.ts
'use client';

import { useLaunchParams } from '@telegram-apps/sdk-react';

const useTelegram = () => {
  const launchParams = useLaunchParams();
  console.log('launchParams', launchParams);
  return launchParams;
};

export default useTelegram;


and 
// page.tsx

'use client';

import useTelegram from '@/hooks/useTelegram';

export default function Page() {
  const launchParams = useTelegram();
  console.log('launchParams', launchParams);

  const rawData = launchParams?.tgWebAppData?.user;

  
  return (
    <div>
      <h1>Hello, {rawData.first_name}</h1>
    </div>
  );
}



error
[FRONTEND]  ✓ Compiled /test in 13.2s
[FRONTEND]  ⨯ ReferenceError: window is not defined
[FRONTEND]     at useTelegram (hooks/useTelegram.ts:7:37)
[FRONTEND]     at Page (app/test/page.tsx:6:33)
[FRONTEND]    5 | const useTelegram = () => {
[FRONTEND]    6 |   // useLaunchParams — это уже хук, и он сам работает только на клиенте
[FRONTEND] >  7 |   const launchParams = useLaunchParams();
[FRONTEND]      |                                     ^
[FRONTEND]    8 |   console.log('launchParams', launchParams);
[FRONTEND]    9 |   return launchParams;
[FRONTEND]   10 | }; {
[FRONTEND]   digest: '4053345005'
[FRONTEND] }
[FRONTEND]  GET /test 500 in 14865ms
[FRONTEND]  ⚠ Cross origin request detected from support.coffeedev.top to /_next/* resource. In a future major version of Next.js, you will need to explicitly configure "allowedDevOrigins" in next.config to allow this.
Answered by chisto
client components are pre-rendered on the server too
and apparently useTelegram hook uses window object

I would recommend making a component with all that telegram specific logic that you need and dynamic import it into Page

export default function DynamicComponent() {
  const launchParams = useTelegram();
  console.log('launchParams', launchParams);

  const rawData = launchParams?.tgWebAppData?.user;

  
  return (
    <div>
      <h1>Hello, {rawData.first_name}</h1>
    </div>
  );
}


import dynamic from 'next/dynamic'
 
const DynamicComponent = dynamic(() => import('../components/dynamic-component'), {
  ssr: false,
})

export default function Page() {
  return (
    <DynamicComponent />
  );
View full answer

4 Replies

chisto
client components are pre-rendered on the server too
and apparently useTelegram hook uses window object

I would recommend making a component with all that telegram specific logic that you need and dynamic import it into Page

export default function DynamicComponent() {
  const launchParams = useTelegram();
  console.log('launchParams', launchParams);

  const rawData = launchParams?.tgWebAppData?.user;

  
  return (
    <div>
      <h1>Hello, {rawData.first_name}</h1>
    </div>
  );
}


import dynamic from 'next/dynamic'
 
const DynamicComponent = dynamic(() => import('../components/dynamic-component'), {
  ssr: false,
})

export default function Page() {
  return (
    <DynamicComponent />
  );
Answer
Coffee without sugar🤍OP
checking
thanks