waku: Mantine Component Library / dev mode / Error when evaluating SSR module

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;
};

About this issue

Original URL
State: open
Created 5 months ago
Comments: 51 (51 by maintainers)

Most upvoted comments

@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)

aheissenberger on Feb 25, 2024

I can do that in the next few days!

Aslemammad on Jan 29, 2024

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

aheissenberger on Mar 1, 2024

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.

dai-shi on Feb 7, 2024

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.

Aslemammad on Feb 7, 2024

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:

The Mantine Component Library has no problems with SSR and SSG in node
The generated html with SSR and SSG had not hydration error in the client browser
The target for the code rendering on the server should be the server (e.g. node or webworker) - see Vite Documentation

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:

browser - loaded by the client
node/webworker (depends on the server the code is deployed)
node - needed for the SSR process during the build process - should not become part of the final output folder

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

aheissenberger on Jan 30, 2024