[Error] ReferenceError: Can't find variable: global

reyamir commented 1 year ago

Description

Hello, I'm migrating my next.js app to vps. I set clientRouting = true and use navigate('<url>') to make redirect to other page. But I got error below

Error Message + Error Stack

[Error] Unhandled Promise Rejection: Error: [vite-plugin-ssr@0.4.115][Bug] You stumbled upon a bug in vite-plugin-ssr's source code. Go to https://github.com/brillout/vite-plugin-ssr/issues/new and copy-paste this error. (The error's sta...

    (anonymous function) (useClientRouter.js:191)

brillout commented 1 year ago

Thanks for the bug report.

What is the content of the line useClientRouter.js:191? (The assert() line.)

reyamir commented 1 year ago

is this?

and

the error message don't show full

reyamir commented 1 year ago

my navigate code

navigate('/onboarding', { overwriteLastHistoryEntry: true });

*.client.tsx

import '@renderer/index.css';
import { Shell } from '@renderer/shell';
import { PageContextClient } from '@renderer/types';

import React from 'react';
import { hydrateRoot } from 'react-dom/client';

export const clientRouting = true;

export async function render(pageContext: PageContextClient) {
  const { Page, pageProps } = pageContext;

  if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined');

  hydrateRoot(
    document.getElementById('app')!,
    <Shell pageContext={pageContext}>
      <Page {...pageProps} />
    </Shell>
  );
}

*.server.tsx

import { Shell } from '@renderer/shell';
import { PageContextServer } from '@renderer/types';

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { dangerouslySkipEscape, escapeInject } from 'vite-plugin-ssr/server';

export const passToClient = ['pageProps'];

export function render(pageContext: PageContextServer) {
  const { Page, pageProps } = pageContext;

  if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined');

  const pageHtml = ReactDOMServer.renderToString(
    <Shell pageContext={pageContext}>
      <Page {...pageProps} />
    </Shell>
  );

  return escapeInject`<!DOCTYPE html>
    <html lang="en" class="dark">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </head>
      <body class="cursor-default select-none overflow-hidden font-sans antialiased">
        <div id="app">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`;
}

brillout commented 1 year ago

No, the line should contain an assert() call.

Or a reproduction.

brillout commented 1 year ago

I think a reproduction would be the best. As a GitHub repository.

brillout commented 1 year ago

From first sight I don't see any problems with your code. So, yea, I'm afraid I'll need a reproduction. Feel free to invite me to a private repo.

reyamir commented 1 year ago

my app is open source too you can look at this repo: https://github.com/luminous-devs/lume/tree/ditch-nextjs

to run, just run:

pnpm install

then

pnpm tauri dev

reyamir commented 1 year ago

oh sorry you, I notify this issue not cause by navigate(), when I replace it with window.location.replace I still get same error

brillout commented 1 year ago

Neat project. Let me have look. It could be because of tauri, let's see.

brillout commented 1 year ago

I could reproduce. I'm digging.

reyamir commented 1 year ago

oh, I've found the problem, if I add

define: {
    global: {
      window: {}
    },
  },

to vite config, this issue is gone, but after redirect with navigate(), I got hydration error

brillout commented 1 year ago

If you fix the original error (the gloabl thing) then I believe VPS's error will go away as well.

This means you can continue develop your app while I fix the bug.

brillout commented 1 year ago

I got hydration error

That's user land though.

That's good: nothing is blocking you anymore, correct?

reyamir commented 1 year ago

yes, everything seem fine now, thank you so much

brillout commented 1 year ago

👍 Really cool to see a Nostr client built with VPS. Definitely keep me updated.

Also a new official example /example/tauri/ would be lovely, PR welcome in case that's something you'd be up to.

reyamir commented 1 year ago

wow, you know about Nostr too I'll make a tauri example for VPS later, look like everything work fine now, Nextjs appDir didn't work well with Tauri, I'm tired of wait bug fix

brillout commented 1 year ago

Yea...

brillout commented 1 year ago

In case you need it, the fix is released in 0.4.115-draft.64315.

vikejs / vike

[Error] ReferenceError: Can't find variable: global #806

Description

Error Message + Error Stack