[SSR]: Investigate plugin not running and possibly add codesandbox with starting code #30766

sopranopillow · 2024-03-12T21:16:11Z

amroncz · 2024-03-13T06:53:52Z

This is my log:

 Next.js 14.1.3
   - Local:        http://localhost:3000
   - Experiments (use at your own risk):
     · swcPlugins

 ✓ Ready in 3.6s
 ○ Compiling /not-found ...
 ✓ Compiled /not-found in 10.1s (2129 modules)
createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/@griffel/react/RendererContext.esm.js (E:\nextjsfluent\.next\server\vendor-chunks\@griffel.js:840:1)
    at __webpack_require__ (E:\nextjsfluent\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/@griffel/react/makeStyles.esm.js (E:\nextjsfluent\.next\server\vendor-chunks\@griffel.js:940:1)
    at __webpack_require__ (E:\nextjsfluent\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@griffel/react/index.esm.js:21:76)
    at (rsc)/./node_modules/@griffel/react/index.esm.js (E:\nextjsfluent\.next\server\vendor-chunks\@griffel.js:900:1)
    at __webpack_require__ (E:\nextjsfluent\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@fluentui/react-components/lib-commonjs/index.js:2561:16)
    at (rsc)/./node_modules/@fluentui/react-components/lib-commonjs/index.js (E:\nextjsfluent\.next\server\vendor-chunks\@fluentui.js:2830:1)
    at __webpack_require__ (E:\nextjsfluent\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:11:84)
    at (rsc)/./src/app/layout.tsx (E:\nextjsfluent\.next\server\app\page.js:194:1)
    at Function.__webpack_require__ (E:\nextjsfluent\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async eB (E:\nextjsfluent\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:402484)
    at async tt (E:\nextjsfluent\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:406237)
    at async tr (E:\nextjsfluent\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:406787)
    at async tl (E:\nextjsfluent\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2057)
    at async E:\nextjsfluent\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2596 {
  digest: '3771978084'
}
 ⨯ node_modules\@griffel\react\RendererContext.esm.js (8:37) @ eval

This is my next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
      swcPlugins: [
        ["fluentui-next-appdir-directive",{
           paths: [
            "@griffel",
            "@fluentui"
          ]
        }],
      ],
    },
  };

export default nextConfig;

This is my layout.tsx:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { FluentProvider, teamsDarkTheme } from "@fluentui/react-components";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <FluentProvider theme={teamsDarkTheme}>
      <html lang='en'>
        <body className={inter.className}>{children}</body>
      </html>
    </FluentProvider>
  );
}

Node version: 20.11.1
Next version: 14.1.3
FluentUI Version: 9.46.8

erikbrgn · 2024-03-25T09:09:56Z

I'm experiencing the same issues on Next@^14.1.2. Downgrading Next to 14.1.1 seems to solve the issue.

julianortlieb · 2024-05-22T08:03:49Z

Are here any updates about this topic. I have the same error.
I opened a issue in the fluentui-nexjs-appdir-plugin repo:

sopranopillow/fluentui-nextjs-appdir-plugin#1

vincentjflorio · 2024-06-05T17:39:02Z

I'm experiencing the same issues on Next@^14.1.2. Downgrading Next to 14.1.1 seems to solve the issue.

I had a completely fresh install which went to a higher version and then downgraded to that exact version and it's still telling me the same thing. I'd appreciate any advice if you'd be so kind?

sopranopillow · 2024-06-05T21:04:49Z

Currently looking at what the issue is. Seems like there's an out of bounds memory access though the error is not very helpful

also worth noting that in rust this works correctly, once used in NextJS it's when it breaks

franciscojun · 2024-06-08T22:23:58Z

This workaround (https://stackoverflow.com/a/76181667) worked for me. (Even though the link is not directly related to Fluent, the issue is pretty much the same.)

sopranopillow · 2024-06-10T21:22:34Z

This workaround (https://stackoverflow.com/a/76181667) worked for me. (Even though the link is not directly related to Fluent, the issue is pretty much the same.)

This is bascially what the plugin does :) . I'll try to get a fix in by this week and hopefully the example as well.

Sorry for the long delay folks.

One thing to note is that 14.1.1 and below do work, so if you downgrade and are still having issues make sure you delete your .next folder in root.

sopranopillow · 2024-06-19T16:10:48Z

FYI, plugin has been fixed! will keep this open to track the stackblitz with an example template

AiSirachcha21 · 2024-06-19T19:56:00Z

@sopranopillow seem to be running into an issue with the Menu component where the MenuPopover doesn't show up. I don't know if this is isolated to the Menu and it's related components or if it's across other components. I've attached my component making use of the Menu component below

"use client"

export default function UserSettingsMenu() {
 return (
  <Menu>
   <MenuTrigger>
    <Avatar size={48} name="Ryan Kuruppu" />
   </MenuTrigger>
   <MenuPopover>
    <MenuList>
     <MenuGroup>
      <MenuGroupHeader>Theme</MenuGroupHeader>
      <MenuItem
       icon={
        theme.name === "dark" ? (
         <WeatherMoonFilled />
        ) : (
         <WeatherMoonOffRegular />
        )
       }
      >
       Dark
      </MenuItem>
      <MenuItem
       icon={
        theme.name === "light" ? (
         <WeatherSunnyFilled />
        ) : (
         <WeatherSunnyRegular />
        )
       }
      >
       Light
      </MenuItem>
     </MenuGroup>
     <MenuGroup>
      <MenuGroupHeader>Account Information</MenuGroupHeader>
      <MenuItem icon={<SettingsRegular />}>Settings</MenuItem>
      <MenuItem icon={<SignOutRegular />}>Sign Out</MenuItem>
     </MenuGroup>
    </MenuList>
   </MenuPopover>
  </Menu>
 );
}

I currently have the below setup.

But it seems to work when downgrading to next@14.1.1 and removing the fluentui-next-appdir-directive from the swcPlugins

experimental: {
  swcPlugins: [
-   ["fluentui-next-appdir-directive", { paths: ["@griffel", "@fluentui"] }]
  ]
}

And I'm not sure if this will help but if I try to add the above line with next@14.1.1 I get the following error

thread '<unnamed>' panicked at /Users/geist/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.270.18/src/plugin.rs:162:14:
failed to invoke plugin: failed to invoke plugin on 'Some("/Users/ryankuruppu/Documents/LiveArena/PoC/admin-panel-poc/node_modules/next/dist/server/app-render/entry-base.js")'

Caused by:
    0: failed to invoke `/Users/ryankuruppu/Documents/LiveArena/PoC/admin-panel-poc/node_modules/fluentui-next-appdir-directive/target/wasm32-wasi/release/fluentui_next_appdir_directive.wasm` as js transform plugin at /Users/ryankuruppu/Documents/LiveArena/PoC/admin-panel-poc/node_modules/fluentui-next-appdir-directive/target/wasm32-wasi/release/fluentui_next_appdir_directive.wasm
    1: RuntimeError: out of bounds memory access
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at library/core/src/panicking.rs:144:5:
panic in a destructor during cleanup
thread caused non-unwinding panic. aborting.

sopranopillow · 2024-06-20T20:02:08Z

@AiSirachcha21 for 14.1.1 and below please use version 1.0.5 of the plugin. I'll add a comment to the repo to mention this :)

AiSirachcha21 · 2024-06-20T20:04:25Z

@AiSirachcha21 for 14.1.1 and below please use version 1.0.5 of the plugin. I'll add a comment to the repo to mention this :)

That's great. But I had to go back to this due to the first issue which was the issue with my Menu component.

That was running the latest version of NextJS, v14.2.3

The popover just stopped working.

robbertkl · 2024-07-31T18:54:49Z

Same here, no more crashes, but still had to go back to Next.js 14.1.1 and fluentui-next-appdir-directive 0.1.5 because popovers / menus stopped working. Any news on this? Is there a separate issue for it?

EDIT: Just found #31429 which tracks the popover issue. See workaround there.

sopranopillow self-assigned this Mar 12, 2024

sopranopillow added the Area: SSR Server-side rendering label Mar 12, 2024

sopranopillow mentioned this issue Mar 12, 2024

Fluent UI v9: NextJS 13 + App router support #29361

Closed

This comment was marked as duplicate.

Sign in to view

layershifter added Fluent UI react-components (v9) Area: Documentation Package: docs Package: utilities and removed Area: Documentation Area: SSR Server-side rendering labels Aug 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SSR]: Investigate plugin not running and possibly add codesandbox with starting code #30766

[SSR]: Investigate plugin not running and possibly add codesandbox with starting code #30766

sopranopillow commented Mar 12, 2024

amroncz commented Mar 13, 2024 •

edited by sopranopillow

Loading

This comment was marked as duplicate.

erikbrgn commented Mar 25, 2024

This comment was marked as duplicate.

julianortlieb commented May 22, 2024 •

edited

Loading

This comment was marked as duplicate.

vincentjflorio commented Jun 5, 2024

sopranopillow commented Jun 5, 2024

franciscojun commented Jun 8, 2024

sopranopillow commented Jun 10, 2024 •

edited

Loading

sopranopillow commented Jun 19, 2024

AiSirachcha21 commented Jun 19, 2024 •

edited

Loading

sopranopillow commented Jun 20, 2024

AiSirachcha21 commented Jun 20, 2024

robbertkl commented Jul 31, 2024 •

edited

Loading

[SSR]: Investigate plugin not running and possibly add codesandbox with starting code #30766

[SSR]: Investigate plugin not running and possibly add codesandbox with starting code #30766

Comments

sopranopillow commented Mar 12, 2024

amroncz commented Mar 13, 2024 • edited by sopranopillow Loading

This comment was marked as duplicate.

erikbrgn commented Mar 25, 2024

This comment was marked as duplicate.

julianortlieb commented May 22, 2024 • edited Loading

This comment was marked as duplicate.

vincentjflorio commented Jun 5, 2024

sopranopillow commented Jun 5, 2024

franciscojun commented Jun 8, 2024

sopranopillow commented Jun 10, 2024 • edited Loading

sopranopillow commented Jun 19, 2024

AiSirachcha21 commented Jun 19, 2024 • edited Loading

sopranopillow commented Jun 20, 2024

AiSirachcha21 commented Jun 20, 2024

robbertkl commented Jul 31, 2024 • edited Loading

amroncz commented Mar 13, 2024 •

edited by sopranopillow

Loading

julianortlieb commented May 22, 2024 •

edited

Loading

sopranopillow commented Jun 10, 2024 •

edited

Loading

AiSirachcha21 commented Jun 19, 2024 •

edited

Loading

robbertkl commented Jul 31, 2024 •

edited

Loading