search

dai-shi / waku

⛩️ The minimal React framework
https://waku.gg
MIT License
4.39k stars 115 forks source link

Mantine Component Library / dev mode / Error when evaluating SSR module #421

Open aheissenberger opened 7 months ago

aheissenberger commented 7 months ago

How can I use Mantine with WAKU without getting this Error: (waku dev --with-ssr or waku dev - no problem with waku build --with-ssr)

repo to replicate the error: https://github.com/aheissenberger/waku-mantine-broken

22:27:44 [vite] Error when evaluating SSR module /node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.48_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js: failed to import "react"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.48_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

Cannot render RSC Error: SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at file:///waku-mantine/node_modules/.pnpm/file+..+..+DEV+waku+packages+waku+waku-0.19.1.tgz_react-dom@18.3.0-canary-b30030471-20240117__jadhby4bmjtn267th77iortg3m/node_modules/waku/dist/lib/handlers/dev-worker-api.js:148:60
    at Worker.<anonymous> (file:///waku-mantine/node_modules/.pnpm/file+..+..+DEV+waku+packages+waku+waku-0.19.1.tgz_react-dom@18.3.0-canary-b30030471-20240117__jadhby4bmjtn267th77iortg3m/node_modules/waku/dist/lib/handlers/dev-worker-api.js:33:52)
    at Worker.emit (node:events:531:35)
    at MessagePort.<anonymous> (node:internal/worker:263:53)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:822:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Versions: Mantine: 7.4.2 - works with NextJS App Router and has 'use client' in all components - https://mantine.dev/guides/next/ WAKU: 0.19.1

root-layout.tsx

import '@mantine/core/styles.css';
import { ColorSchemeScript, createTheme, MantineProvider } from '@mantine/core';
import type { ReactNode } from 'react';

import { Header } from '../components/header.js';
import { Footer } from '../components/footer.js';

const theme = createTheme({
  /** Put your mantine theme override here */
});

type RootLayoutProps = { children: ReactNode };

export const RootLayout = async ({ children }: RootLayoutProps) => {
  const data = await getData();

  return (

    <div id="__waku" >
      <meta property="description" content={data.description} />
      <link rel="icon" type="image/png" href={data.icon} />
      <ColorSchemeScript />
      <MantineProvider theme={theme}>
        <Header />
        <main >
          {children}
        </main>
        <Footer />
      </MantineProvider>
    </div>

  );
};

const getData = async () => {
  const data = {
    description: 'An internet website!',
    icon: '/images/favicon.png',
  };

  return data;
};
dai-shi commented 7 months ago

Thanks for reporting. Hm, we had some issues which work on build but not on dev, previously. But, this and #418 are errors on build. So, it feels like there are some issues in the build process.

Can anyone investigate it? It seems the error is different from others.

dai-shi commented 7 months ago

To confirm, does waku build work?

aheissenberger commented 7 months ago

To confirm, does waku build work?

Yes - waku build --with-ssr is working and the result is working with waku start --with-ssr

The problem exists only in dev mode

dai-shi commented 7 months ago

Oh, I misread the description.

If it's CJS compatibility, it's a known limitation #110 and the workaround is something like this. https://github.com/dai-shi/waku/blob/2742c3ad1201e37f6fa20324b154a6e91f6c4145/examples/12_css/vite.config.ts#L6-L10

aheissenberger commented 7 months ago

Thanks - this fixed it - if you tell me where in the docs I can write a short text to help others:

  1. pnpm add -D vite
  2. add vite.config.ts: 
    import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => ({
...(mode === 'development' && {
  ssr: {
    external: ['@mantine/core'],
  },
}),
}));
dai-shi commented 7 months ago

Great to hear. For now, how about ./docs/commonjs-guide.mdx?

aheissenberger commented 7 months ago

I still have a Problem with all Components using the MantineProvider. They all have 'use client' in their code and I wrapped them in a 'use client' component but still get this error which is produced by the server in dev mode.

This is the wrapper component: https://github.com/aheissenberger/waku-mantine-broken/blob/master/src/components/MantineTestComponet.tsx

repo to reproduce the problem: https://github.com/aheissenberger/waku-mantine-broken

waku dev --with-ssr the error:

Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at useMantineTheme (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.4.2_@mantine+hooks@7.4.2_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_xuwk43wtjddfw4wbpcyehaekvu/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs:11:11)
    at useProps (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.4.2_@mantine+hooks@7.4.2_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_xuwk43wtjddfw4wbpcyehaekvu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.mjs:7:17)
    at CopyButton (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.4.2_@mantine+hooks@7.4.2_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_xuwk43wtjddfw4wbpcyehaekvu/node_modules/@mantine/core/esm/components/CopyButton/CopyButton.mjs:17:51)
    at renderWithHooks (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9532:16)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9611:15)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at finishFunctionComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9705:5)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9651:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderLazyComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9858:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9977:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10386:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10190:7)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderHostElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9513:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9887:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10184:11)
    at renderContextProvider (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9840:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9965:11)
    at renderMemo (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9783:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9959:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at finishFunctionComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9705:5)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9651:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderLazyComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9858:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9977:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at finishFunctionComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9705:5)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9651:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderLazyComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9858:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9977:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderHostElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9513:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9887:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10386:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10190:7)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10386:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10190:7)
    at renderContextProvider (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9840:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9965:11)
Cannot render RSC Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at useMantineTheme (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.4.2_@mantine+hooks@7.4.2_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_xuwk43wtjddfw4wbpcyehaekvu/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs:11:11)
    at useProps (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.4.2_@mantine+hooks@7.4.2_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_xuwk43wtjddfw4wbpcyehaekvu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.mjs:7:17)
    at CopyButton (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.4.2_@mantine+hooks@7.4.2_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_xuwk43wtjddfw4wbpcyehaekvu/node_modules/@mantine/core/esm/components/CopyButton/CopyButton.mjs:17:51)
    at renderWithHooks (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9532:16)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9611:15)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at finishFunctionComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9705:5)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9651:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderLazyComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9858:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9977:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10386:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10190:7)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderHostElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9513:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9887:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10184:11)
    at renderContextProvider (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9840:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9965:11)
    at renderMemo (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9783:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9959:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at finishFunctionComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9705:5)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9651:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderLazyComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9858:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9977:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at finishFunctionComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9705:5)
    at renderIndeterminateComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9651:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9881:7)
    at renderLazyComponent (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9858:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9977:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderHostElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9513:5)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9887:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10163:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10386:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10190:7)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10507:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10386:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10190:7)
    at renderContextProvider (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9840:3)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-b30030471-20240117_react@18.3.0-canary-b30030471-20240117/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9965:11)
9:51:55 PM [vite] page reload src/templates/home-page.tsx

waku build --with-ssr - error:

dist/public/assets/rd-server.js                                 162.42 kB │ gzip: 48.70 kB
dist/public/assets/index-elMCYdM9.js                            177.23 kB │ gzip: 55.26 kB
✓ built in 1.67s
ReferenceError: document is not defined
    at file:///TST/waku-mantine/dist/public/assets/rsc263-ce06dd315.js:1:4830
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

ReferenceError: document is not defined
    at file:///TST/waku-mantine/dist/public/assets/rsc263-ce06dd315.js:1:4830
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

Node.js v21.6.1
aheissenberger commented 7 months ago

Update on my tests:

@dai-shi Please give me some advice where I can further investigate to fix this problem. It looks like it is related to the SSR done with react-dom-server.edge.development.js.

aheissenberger commented 7 months ago

@dai-shi I need help - I have debugged this multiple times and still do not understand why the context ist lost.

Here is a repository which only tries to access the Mantine Theme Context and always fails. I created my own Context HOC which works without any flaws.

The repo to reproduce the problem: https://github.com/aheissenberger/waku-context-broken

This is the Mantine Context Provider which fails: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx

dai-shi commented 7 months ago

Hi, sorry for the delay.

Confirmed the use client directive: https://unpkg.com/browse/@mantine/core@7.5.0/esm/core/MantineProvider/MantineProvider.mjs

So, I think we need to sit down and investigate it deeply. A few points to start:

I created my own Context HOC which works without any flaws.

Oh, you already tried it. Then, I'd add Mantine code into your own Context one by one, until it reproduces the error.

aheissenberger commented 7 months ago

Render Static

createPage({
    render: 'static',
    path: '/mantine',
    component: MantinePage,
  });

Error: @mantine/core: MantineProvider was not found in component tree exists:

Works

Error build with SSR pnpm waku build --with-ssr

ReferenceError: document is not defined
    at file:///Users/ah/SVN-Checkouts/TST/waku-context-broken/dist/public/assets/rsc262-cf5b1cd47.js:1:4830
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

ReferenceError: document is not defined
    at file:///Users/ah/SVN-Checkouts/TST/waku-context-broken/dist/public/assets/rsc262-cf5b1cd47.js:1:4830
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

Node.js v21.6.1

Render Dynamic

  createPage({
    render: 'dynamic',
    path: '/mantine',
    component: MantinePage,
  });

Error: @mantine/core: MantineProvider was not found in component tree exists:

Works:

Error start with SSR pnpm waku start --with-ssr

ReferenceError: document is not defined
    at file:///Users/ah/SVN-Checkouts/TST/waku-context-broken/dist/public/assets/rsc263-cf5b1cd47.js:1:4830
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
Cannot render RSC ReferenceError: document is not defined
    at file:///Users/ah/SVN-Checkouts/TST/waku-context-broken/dist/public/assets/rsc263-cf5b1cd47.js:1:4830
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
aheissenberger commented 7 months ago

add ReferenceError: document is not defined

I was able to debug and isolate the Problem - it is related to the library react-textarea-autosize a dependency of Mantine:

// react-textarea-autosize.browser.esm.js
// line 104
var isIE = !!document.documentElement.currentStyle ;

The problem is that waku is importing the browser build react-textarea-autosize.browser.esm.js of this library which is wrong. The waku builder should provide the worker condition to select the react-textarea-autosize.worker.esm.js of the library. see feedback in this closed issue: https://github.com/Andarist/react-textarea-autosize/issues/335

You can reproduce the problem with: pnpm add @mantine/core

create a page with:

import {  MantineProvider } from '@mantine/core';
import { Textarea } from '@mantine/core';

export const TextareaPage = async () => {
  return (
    <div>
      <title>TextAreaPage</title>
      <h1>TextAreaPage</h1>
      <MantineProvider>
         <Textarea autosize={true}/>
      </MantineProvider>
    </div>
  );
};

run pnpm waku dev --with-ssr

vite v5.0.12 building SSR bundle for production...
transforming...
✓ 686 modules transformed.
rendering chunks...
✓ built in 1.18s
vite v5.0.12 building SSR bundle for production...
transforming...
✓ 667 modules transformed.
rendering chunks...
dist/assets/rsc1-8e67dcaea.js     0.23 kB
...
dist/assets/rsc251-35582c347.js   3.06 kB
dist/entries.js                  13.96 kB
dist/rsdw-server.js              50.98 kB
✓ built in 586ms
vite v5.0.12 building for production...
transforming...
✓ 702 modules transformed.
rendering chunks...
computing gzip size...
dist/public/index.html                                   0.94 kB │ gzip:  0.41 kB
dist/public/assets/rsc14-3c4d10758.js                    0.03 kB │ gzip:  0.05 kB
...
dist/public/assets/rsc207-f0592c8d9.js                  10.74 kB │ gzip:  4.07 kB
dist/public/assets/rsdw-client.js                       13.20 kB │ gzip:  4.92 kB
dist/public/assets/waku-client.js                       13.23 kB │ gzip:  5.06 kB
dist/public/assets/react-number-format.es-GxG7-1q5.js   14.58 kB │ gzip:  5.67 kB
dist/public/assets/floating-ui.react.esm-yXkTxJPR.js    16.86 kB │ gzip:  6.13 kB
dist/public/assets/floating-ui.dom-IQvWPWYn.js          19.05 kB │ gzip:  7.45 kB
dist/public/assets/rd-server.js                        162.42 kB │ gzip: 48.70 kB
dist/public/assets/index-elMCYdM9.js                   177.23 kB │ gzip: 55.26 kB
✓ built in 1.69s

ReferenceError: document is not defined
    at file:///Users/ah/SVN-Checkouts/TST/waku-context-broken/dist/public/assets/rsc260-cf5b1cd47.js:1:4791
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

ReferenceError: document is not defined
    at file:///Users/ah/SVN-Checkouts/TST/waku-context-broken/dist/public/assets/rsc260-cf5b1cd47.js:1:4791
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

Node.js v21.6.1

some more curiosities

This will build pnpm waku build --with-ssr - the Mantine component is in a file without 'use client'

textinput-page.tsx:

import {  MantineProvider } from '@mantine/core';
import { TextInput} from '@mantine/core'

export const TextinputPage = async () => {
  return (
    <div>
      <title> TextinputPage </title>
      <h1> TextinputPage </h1>
      <MantineProvider>
         <TextInput />
      </MantineProvider>
    </div>
  );
};

If I extract the <TextInput /> to it's own component TextInputComponent.tsx with 'use client' in the first Line the build will break again with the same error:

TextInputComponent.tsx:

'use client'

import { TextInput} from '@mantine/core'

export const TextInputComponent = () => {
    return (<div><TextInput/></div>);
}

textinput-page.tsx:

import {  MantineProvider } from '@mantine/core';
import { TextInputComponent } from '../components/TextInputComponent.js';

export const TextinputPage = async () => {
  return (
    <div>
      <title> TextinputPage </title>
      <h1> TextinputPage </h1>
      <MantineProvider>
         <TextInputComponent />
      </MantineProvider>
    </div>
  );
};
dai-shi commented 7 months ago

The problem is that waku is importing the browser build react-textarea-autosize.browser.esm.js of this library which is wrong.

I wonder how Waku imports react-textarea-autosize.browser.esm.js. Maybe Vite adds browser condition.

https://unpkg.com/browse/react-textarea-autosize@8.5.3/package.json I wonder whether adding "worker" or removing "browser" is the right solution.

"worker" isn't listed in https://runtime-keys.proposal.wintercg.org/ nor in https://github.com/browserslist/browserslist#browsers, and I'm not sure if it means "webworker" or "cloudflare workers". We should probably avoid it.

Related #393 by @himself65

dai-shi commented 7 months ago

This will build pnpm waku build --with-ssr - the Mantine component is in a file without 'use client'

That's interesting and nice finding for a hint. @Aslemammad I wonder if you are interested in taking a closer look at this.

Aslemammad commented 7 months ago

I can do that in the next few days!

aheissenberger commented 7 months ago

The problem is that waku is importing the browser build react-textarea-autosize.browser.esm.js of this library which is wrong.

I wonder how Waku imports react-textarea-autosize.browser.esm.js. Maybe Vite adds browser condition.

https://unpkg.com/browse/react-textarea-autosize@8.5.3/package.json I wonder whether adding "worker" or removing "browser" is the right solution.

I am not an expert on package.json import statement but for me it looks like we do not need to add the condition "worker" as the "default": "./dist/react-textarea-autosize.cjs.js" points to the non browser version.

Some how the condition "browser" is set and loads the wrong package for rendering on the server. Maybe too related to 'use client'.

"exports": {
        ".": {
            "types": {
                "import": "./dist/react-textarea-autosize.cjs.mjs",
                "default": "./dist/react-textarea-autosize.cjs.js"
            },
            "development": {...},
            "worker": {
                "module": "./dist/react-textarea-autosize.worker.esm.js",
                "import": "./dist/react-textarea-autosize.worker.cjs.mjs",
                "default": "./dist/react-textarea-autosize.worker.cjs.js"
            },
            "browser": {
                "module": "./dist/react-textarea-autosize.browser.esm.js",
                "import": "./dist/react-textarea-autosize.browser.cjs.mjs",
                "default": "./dist/react-textarea-autosize.browser.cjs.js"
            },
            "module": "./dist/react-textarea-autosize.esm.js",
            "import": "./dist/react-textarea-autosize.cjs.mjs",
            "default": "./dist/react-textarea-autosize.cjs.js"
        },
        "./package.json": "./package.json"
    },
aheissenberger commented 7 months ago

@dai-shi what I do not understand is why the rendering (SSR on server during build) emitHtmlFiles will load the Modules (loadModule) created correctly for the browser in public/assets from /dist/entries.js - how can this work?:

export function loadModule(id) {
  switch (id) {
    case 'rsdw-server':
      return import('./rsdw-server.js');

    case 'client/react':
      return import('./public/assets/react.js');

    case 'client/rd-server':
      return import('./public/assets/rd-server.js');

    case 'client/rsdw-client':
      return import('./public/assets/rsdw-client.js');

    case 'client/waku-client':
      return import('./public/assets/waku-client.js');

    case 'public/assets/waku-client.js':
      return import('./public/assets/waku-client.js');

    case 'public/assets/rsc0-47a606723.js':
      return import('./public/assets/rsc0-47a606723.js');
...

This is the reason for the ReferenceError: document is not defined when building the static html files as the code in dist/public/assets/rsc258-cf5b1cd47.js is executed.

dai-shi commented 7 months ago

SSR is basically traditional client React rather than RSC. So, it runs with client bundles. Otherwise, we can't render client components on server.

I'm not sure if this answers to your question all. Feel free to have follow-up questions.

dai-shi commented 7 months ago

Some how the condition "browser" is set

Yeah, I think removing the "browser" condition will solve this. But, not sure if it breaks other cases as a side effect. In the Waku source code, we don't add "browser", so it's probably Vite's one.

aheissenberger commented 7 months ago

Some how the condition "browser" is set

Yeah, I think removing the "browser" condition will solve this. But, not sure if it breaks other cases as a side effect. In the Waku source code, we don't add "browser", so it's probably Vite's one.

I think you will need to bundle a different set of modules for SSR at build time without the condition "browser". The existing modules in the public/assets folder need to be bundled with condition "browser" as they will run in the browser.

himself65 commented 7 months ago

"worker" condition looks like an undocumented name. There are two kinds of workers: node worker and web worker, and maybe more: deno worker... anyway they are all just Web Worker + JS host environment

aheissenberger commented 7 months ago

"worker" condition looks like an undocumented name. There are two kinds of workers: node worker and web worker, and maybe more: deno worker... anyway they are all just Web Worker + JS host environment

In my option - see above - the bundle conditions required for SSR during the build step can leave it to the package.json import configuration to choose the right package. As long as there is no "browser" condition, the default in the import section of packages.json is pointing to a version of the code which does not need a browser environment.

dai-shi commented 7 months ago

I think you will need to bundle a different set of modules for SSR at build time without the condition "browser".

I'm a bit skeptical about it. Our implementation shouldn't be that complicated, and it basically leads to more "hydration mismatch" errors.

Can anyone investigate how Next.js solves it?

aheissenberger commented 7 months ago

Can anyone investigate how Next.js solves it?

I have no idea how Next.js works but I use Solid Start which uses vinxi from @nksaraf. The internal output folder .vinxi contains three different bundles .

I did some research based on the official Vite SSR & SSG Example code and my findings are:

Here is my repro which I used to conduct the tests: https://github.com/aheissenberger/vite-ssr-test

I suggest to change the build pipeline to support the following target output:

maybe have a look at vinxi - specifically the existing deploy adapter from the Nuxt ecosystems Nitro Stack are amazing.

dai-shi commented 7 months ago

Okay, if we were to split bundles to three types, it would require re-architecture to some extent and might be able to only come after v0.20. There's an issue with Vite, as I see, because we use Vite's SSR mode for RSC, it's conflicting. We could work it around with two vite configs, but I wish Vite would support RSC (a new server mode) natively. Otherwise, our code base won't be fairly maintainable.

That said, I'm not sure if I understand the issue and the community standard (especially worker condition isn't very clear), so I think we need more time to investigate.

Meanwhile, I would like to try two workarounds:

aheissenberger commented 7 months ago

I found this info related to the needed three graphs: https://github.com/vitejs/vite/discussions/12715

and I could solve the problem mit changing from:

noExternal: /^(?!node:)/

to

noExternal: [
                'react',
                //'react-dom',
                'react-server-dom-webpack',
                'waku'
            ]

with not including the modules for the ssd build and loading the right packages from node_module folder it fixed the one problem but it broke at an other place in the Mantine code :-(

TypeError: Cannot read properties of null (reading 'useRef')
    at exports.useRef (/waku-context-broken/node_modules/.pnpm/react@18.3.0-canary-b30030471-20240117/node_modules/react/cjs/react.production.min.js:26:410)
    at useProviderColorScheme (file:///waku-context-broken/node_modules/.pnpm/@mantine+core@7.5.0_@mantine+hooks@7.5.0_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_ezcisnejge34bqbusxtiepnfpa/node_modules/@mantine/core/esm/core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.mjs:15:17)
    at MantineProvider (file:///waku-context-broken/node_modules/.pnpm/@mantine+core@7.5.0_@mantine+hooks@7.5.0_@types+react@18.2.48_react-dom@18.3.0-canary-b300304_ezcisnejge34bqbusxtiepnfpa/node_modules/@mantine/core/esm/core/MantineProvider/MantineProvider.mjs:27:61)
aheissenberger commented 7 months ago

As here are too many problem intermingled, I will create a specific issue and example implementation with the react-textarea-autosize component for handling packages which correctly provide different code for browser, node and other environments.

dai-shi commented 7 months ago

Yeah, let's tackle one by one.

dai-shi commented 6 months ago

Let's say #448 is a separate issue, and disable SSR (no --with-ssr option) should avoid it,

and, if #445 handles CJS as hoped, the remaining issue is https://github.com/dai-shi/waku/issues/421#issuecomment-1913841980, right?

aheissenberger commented 6 months ago

I do not See any changes when using the latest code from the main branch which should include #445 .

With the libraries externalized it works for simple Components (e.g. Buttons) but fails for complex ones (e.g. DateInput) with https://github.com/dai-shi/waku/issues/421#issuecomment-1910994172 Error: @mantine/core: MantineProvider was not found in component tree which boils down to the context not existing for these components.

When I disable this in vite.config.ts:

ssr: {
      //external: ['@mantine/core','@mantine/dates','@mantine/hooks'],
    },

I get this error when loading a page in the browser - gives the same error for --with-ssr

pnpm waku dev
ready: Listening on http://localhost:3000/
10:48:41 AM [vite] ✨ new dependencies optimized: react-dom/client
10:48:41 AM [vite] ✨ optimized dependencies changed. reloading
10:48:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js: failed to import "react"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

Cannot render RSC Error: SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at file:///TST/waku-mantine/node_modules/.pnpm/file+..+..+DEV+waku+packages+waku+waku-0.19.1.tgz_react-dom@18.3.0-canary-b30030471-20240117__jadhby4bmjtn267th77iortg3m/node_modules/waku/dist/lib/handlers/dev-worker-api.js:101:60
    at Worker.<anonymous> (file:///TST/waku-mantine/node_modules/.pnpm/file+..+..+DEV+waku+packages+waku+waku-0.19.1.tgz_react-dom@18.3.0-canary-b30030471-20240117__jadhby4bmjtn267th77iortg3m/node_modules/waku/dist/lib/handlers/dev-worker-api.js:33:52)
    at Worker.emit (node:events:531:35)
    at MessagePort.<anonymous> (node:internal/worker:263:53)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:822:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)
10:48:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/index.js: failed to import "/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

10:48:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/react-remove-scroll@2.5.7_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/react-remove-scroll/dist/es2015/UI.js: failed to import "/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/index.js"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

10:48:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/react-remove-scroll@2.5.7_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/react-remove-scroll/dist/es2015/Combination.js: failed to import "/node_modules/.pnpm/react-remove-scroll@2.5.7_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/react-remove-scroll/dist/es2015/UI.js"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

10:48:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/react-remove-scroll@2.5.7_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/react-remove-scroll/dist/es2015/index.js: failed to import "/node_modules/.pnpm/react-remove-scroll@2.5.7_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/react-remove-scroll/dist/es2015/Combination.js"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

10:48:42 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/@mantine+core@7.5.1_@mantine+hooks@7.5.1_@types+react@18.2.53_react-dom@18.3.0-canary-b300304_fb4ljodk3hn3mvrim4zcv3baey/node_modules/@mantine/core/esm/index.mjs: failed to import "/node_modules/.pnpm/react-remove-scroll@2.5.7_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/react-remove-scroll/dist/es2015/index.js"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

10:48:42 AM [vite] Error when evaluating SSR module /src/templates/directory-list.tsx: failed to import "/node_modules/.pnpm/@mantine+core@7.5.1_@mantine+hooks@7.5.1_@types+react@18.2.53_react-dom@18.3.0-canary-b300304_fb4ljodk3hn3mvrim4zcv3baey/node_modules/@mantine/core/esm/index.mjs"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

10:48:42 AM [vite] Error when evaluating SSR module /TST/waku-mantine/src/entries.js: failed to import "/src/templates/directory-list.tsx"
|- SyntaxError: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

    at analyzeImportedModDifference (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50953:19)
    at nodeImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50904:9)
    at async ssrImport (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50799:24)
    at async eval (/TST/waku-mantine/node_modules/.pnpm/use-callback-ref@1.3.1_@types+react@18.2.53_react@18.3.0-canary-b30030471-20240117/node_modules/use-callback-ref/dist/es2015/useRef.js:3:44)
    at async instantiateModule (file:///TST/waku-mantine/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)
dai-shi commented 6 months ago

445 isn't merged yet.

Can you try CSB build? https://ci.codesandbox.io/status/dai-shi/waku/pr/445/builds/468686 npm i https://pkg.csb.dev/dai-shi/waku/commit/1a510638/waku

aheissenberger commented 6 months ago

with #445 and without externalized libraries:

simple components

complex components (e.g. DateInput)

dai-shi commented 6 months ago

Thanks for the summary.

448 will be tackled separately, so known remaining is MantineProvider was not found error (DEV only). @Aslemammad Can you take a look please?

aheissenberger commented 6 months ago

457 fixes all problems except MantineProvider was not found in DEV Mode only

aheissenberger commented 6 months ago

Here is the simples Test case for MantineProvider was not found:

  1. install the package pnpm add @mantine/core

  2. add a page - e.g. mantine-page.tsx:

    import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import { MantineProvider, useMantineTheme } from '@mantine/core';
import { MantineConsumer } from '../components/MantineConsumer.js';

export const MantinePage = async () => {

return (
  <MantineProvider>
    <div>Mantine</div>
      <MantineConsumer />
  </MantineProvider>
);
};

  3. add a client component MantineConsumer.tsx

    'use client';
import { useMantineTheme} from '@mantine/core'

export const MantineConsumer = () => {
    const theme = useMantineTheme();
    return (<div>Theme: {`${theme?.primaryColor}`}</div>);
}

  4. run in DEV MODE - pnpm waku dev --with-ssr - no Problems with BUILD and PROD mode (after fix #457 )

ERROR:

Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at Module.useMantineTheme (file:///TST/waku-mantine/node_modules/.pnpm/@mantine+core@7.5.1_@mantine+hooks@7.5.1_@types+react@18.2.53_react-dom@18.3.0-canary-4b2a111_z32bqemrc3zlpqlesceu25haem/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs:11:11)
dai-shi commented 6 months ago

@aheissenberger It seems like you are becoming fairly familiar with Waku codebase. Can you dig into it further? For example, can it be reproduced without Mantine library?

aheissenberger commented 6 months ago

@aheissenberger It seems like you are becoming fairly familiar with Waku codebase. Can you dig into it further? For example, can it be reproduced without Mantine library?

I tried this a couple days ago but could not find a setup which reproduced the problem. "normal" Context works

Aslemammad commented 6 months ago

This fixed it.

import { defineConfig } from 'vite';
//import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default defineConfig(({ mode }) => ({
  ...({
    optimizeDeps: {
      exclude: ['@mantine/core','@mantine/dates','@mantine/hooks'],
    },
    ssr: {
      noExternal: ['@mantine/core','@mantine/dates','@mantine/hooks'],
    },
  }),
  //plugins: [vanillaExtractPlugin({ emitCssInSsr: true }), stylexPlugin()],
}));

While investigating, found out that MantineProvider was importing the ESM format of mantine (all modules were seperate), but the CopyButton was receiving the optimized bundled version of mantine (a huge mantine_core.js file, maybe cjs?).

I'm not sure about the reason, but I guess this is either a vite issue, because this happened when the module was being imported later on (e.g. dynamic import through chunk loading in waku). Or it's a package exports issue from mantine. Because MantineThemeProvider was being imported first as ESM and later, the CopyButton was being imported with a dynamic import, as cjs.

I first doubted that waku was importing modules in two different modes (one main thread, one worker) in the server, but that was not correct, plus this issue was also happening in the client (that's why we have optimizeDeps there)

Feel free to close this issue if it resolved the problem.

dai-shi commented 6 months ago

@Aslemammad Thanks for investigating. So, it's dual module issue with CJS/ESM. I wonder why we (waku&vite) don't always pick ESM. But, if optimizeDeps is required to fix the issue, it sounds like it's not specific to Waku.

Aslemammad commented 6 months ago

I wonder why we (waku&vite) don't always pick ESM.

I don't think it's us to choose, it's mostly related to package exports and these things happen many times.

I might be wrong, so if anyone knows how we can enforce ESM, please let us know.

aheissenberger commented 6 months ago

I can start a documentation on how to add React UI Libraries to Waku and would start with Mantine to document the findings from Aslemammad in a central place. Please provide me with the place/folder and if exits with the required document structure.

dai-shi commented 6 months ago

We haven't decided the docs structure, so let's start with something like ./docs/ui-libs/mantine.mdx. We will probably re-structure it eventually.

aheissenberger commented 6 months ago

I have a setup wich currently works with all base Mantine Libraries:

Not working:

Not tested (will be done soon):

I have also prepared a template to be added to the Mantine get started Community templates section which will need the next release of Waku to become usable.

I also work on a documentation on how to add Mantine including required fixes to a fresh Waku setup.

aheissenberger commented 6 months ago

Update:

@dai-shi the bundling currently does not exists? I get 588 javascript requests on this simple form and a 1.5MB/1.7MB Download https://d3u8jdoqz1djq3.cloudfront.net/appshell/mantine/form

dai-shi commented 6 months ago

the bundling currently does not exists?

Do you mean bundling for client? See our simple template. Does it look good? In that case, isn't it because of your vite config?

aheissenberger commented 6 months ago

This is the vite.config.ts for Mantine and the build.log output:

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => ({
  ...({
    optimizeDeps: {
      include: [
        'dayjs', 'dayjs/**/*', // @mantine/dates
        '@mantine/charts > lodash/**/*', // @mantine/charts
        '@mantine/code-highlight > highlight.js', // @mantine/code-highlight
        '@mantine/notifications > prop-types', // @mantine/notifications
      ],
      esbuildOptions: {
        preserveSymlinks: true,
      },
      exclude: ['@mantine/core', '@mantine/hooks', '@mantine/code-highlight', '@mantine/charts', '@mantine/spotlight', '@mantine/notifications','@mantine/carousel','@mantine/dropzone','@mantine/nprogress','@mantine/tiptap'],
    },
    ssr: {
      noExternal: ['@mantine/core', '@mantine/hooks', '@mantine/code-highlight', '@mantine/charts', '@mantine/spotlight', '@mantine/notifications','@mantine/carousel','@mantine/dropzone','@mantine/nprogress','@mantine/tiptap'],
    },
  }),
  plugins: [],
}));
aheissenberger commented 6 months ago

@dai-shi @Aslemammad - you rock!

WAKU git commit ff20bfe538e32d9315f679a5d4d40e0b377aee18 fixed all problems for build --with-ssr and start --with-ssr and works without avite.config.ts file - even the mantine chart library now works pnpm waku build --with-ssr 👍 pnpm waku start --with-ssr 👍

Update on DEV MODE problems: pnpm waku dev 👎 pnpm waku dev --with-ssr 👎

Except for the Mantine Charts which fails with an additional Error I can fix the problems in DEV MODE by adding a vite.config.ts with some special treatments for the libraries. But it would be great to solve this too.

Error in DEV MODE: - without ssr the error is thrown in the browser.

pnpm waku dev --with-ssr
ready: Listening on http://localhost:3000/
Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at useMantineTheme (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.5.3_@mantine+hooks@7.5.3_@types+react@18.2.58_react-dom@18.3.0-canary-14fd963_2zua74gy55dhrj32n6wxynnjcu/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs:11:11)
    at useProps (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.5.3_@mantine+hooks@7.5.3_@types+react@18.2.58_react-dom@18.3.0-canary-14fd963_2zua74gy55dhrj32n6wxynnjcu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.mjs:8:17)
    at file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.5.3_@mantine+hooks@7.5.3_@types+react@18.2.58_react-dom@18.3.0-canary-14fd963_2zua74gy55dhrj32n6wxynnjcu/node_modules/@mantine/core/esm/components/Modal/Modal.mjs:46:7
    at renderWithHooks (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9533:16)
    at renderForwardRef (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9772:18)
    at renderElement (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9928:11)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10157:13)
    at renderNode (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10503:14)
    at renderChildrenArray (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10382:5)
    at renderNodeDestructive (/waku-mantine/node_modules/.pnpm/react-dom@18.3.0-canary-14fd9630e-20240213_react@18.3.0-canary-14fd9630e-20240213/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10184:7)
Cannot render RSC Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at useMantineTheme (file:///waku-mantine/node_modules/.pnpm/@mantine+core@7.5.3_@mantine+hooks@7.5.3_@types+react@18.2.58_react-dom@18.3.0-canary-14fd963_2zua74gy55dhrj32n6wxynnjcu/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs:11:11)
dai-shi commented 6 months ago

Update on DEV MODE problems: pnpm waku dev 👎 pnpm waku dev --with-ssr 👎

Is it possible to create a reproduction without the library?

aheissenberger commented 6 months ago

I will try again - but its hard to replicate the complexity of the main context provider of the library.

aheissenberger commented 6 months ago

I am not able to fix the problem and need help @dai-shi @Aslemammad:

I was able to replicate the problem with a simple replication of the MantineProvider and was able to track down the problem to be related to the bundling vitejs is doing for external packages in DEV mode. It could be related to the problem, that the package is referencing a different react version but there is only one version installed in the node_modules folder.

Here is a reference project which shows the problem: https://github.com/aheissenberger/waku-mantine-broken-01 pnpm waku dev - navigate to link MyUI Package (broken) and look at the console. I replaced the Exception with a console.log to keep the react tree. https://github.com/aheissenberger/myui/blob/5715f4ea793fd2662e54acc4f7a0e192d9fb88da/src/MyThemeProvider.mjs#L12

I had to add the provider as an external package to get the error: https://github.com/aheissenberger/myui

The same provider local as part of a WAKU project will not loose the context: https://github.com/aheissenberger/waku-mantine-broken-01/blob/b1c25538e7d6e1febd3ec94c205b292ba09c5814/src/components/my/MyThemeProvider.tsx#L11