search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.59k stars 2.75k forks source link

[Bug]: `@fluentui/react-components` won't work with Next v15 #33327

Open dorianco-microsoft opened 1 week ago

dorianco-microsoft commented 1 week ago

Component

All

Package version

9.56.2

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 51.36 GB / 63.71 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.26.1 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.6 - ~\AppData\Roaming\npm\bun.CMD

Current Behavior

Demo Project where you can check for the behavior can be found at https://github.com/dorianco-microsoft/fluentui9-next15 After creating a Next project using app dir and configuring @fluentui/react-components as mentioned in your documentation for Next.js@>=13 appDir router many errors are encountered.

The first problem found, as described in the Demo Project README.md, is regarding lack of support for React v19, although, I'm aware it is not the stable version yet. The @fluentui/react-components package has the following version constraint >=16.14.0 <19.0.0 for the React package, so installing @fluentui/react-components won't work.

A work around I found for this problem was to downgrade the React version 9.0.0-rc-66855b96-20241106 that comes with Next 15.0.3 (latest stable version) to the latest React stable 18.3.1, only after that, it was possible get @fluentui/react-components installed in the project. I also verified that the sample boilerplate the Next project generates continued working.

Having @fluentui/react-components and fluentui-next-appdir-directive packages installed in the project, I proceeded to apply the setup and configuration mentioned in your documentation at Concepts / Developer / Server-Side Rendering / Next.js appDir setup - Docs ⋅ Storybook. You can also check my Demo Project to double check I applied the changes as suggested.

After that, anytime I tried to run the project using npm run dev I would get the following error:

> my-app@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.0.3 (Turbopack)
   - Local:        http://localhost:3000
   - Experiments (use with caution):
     · swcPlugins

 ✓ Starting...
 ✓ Ready in 1021ms
 ○ Compiling / ...
thread '<unnamed>' panicked at /home/estebanmu-dev/.cargo/registry/src/index.crates.io-6f17d22bba15001f/rkyv-0.7.44/src/impls/core/mod.rs:266:67:
called `Result::unwrap()` on an `Err` value: LayoutError
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
 ✓ Compiled / in 1032ms
 ○ Compiling /_error ...
 ⨯ ./node_modules/next/dist/esm/build/templates/pages.js:3:1
Module not found: Can't resolve 'next/dist/esm/build/templates/helpers'
failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'

Caused by:
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.
- RuntimeError: out of bounds memory access

Debug info:
- Execution of <ModuleAssetContext as AssetContext>::process_resolve_result failed
- Execution of apply_module_type failed
- Execution of *EcmascriptExports::needs_facade failed
- Execution of <EcmascriptModuleAsset as EcmascriptChunkPlaceable>::get_exports failed
- Execution of analyse_ecmascript_module failed
- failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'
- Execution of <EcmascriptModuleAsset as EcmascriptParsable>::failsafe_parse failed
- Execution of parse failed
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.

                  Note that if you want to use the os features like filesystem, you need to use `wasi`. Wasm itself does not have concept of filesystem.

                  https://swc.rs/docs/plugin/selecting-swc-core

                  See https://plugins.swc.rs/versions/from-plugin-runner/4.0.0 for the list of the compatible versions.

                  Build info:
                      Date: 2024-11-07
                      Timestamp: 2024-11-07T09:55:40.203904400Z

                  Version info:
                      swc_plugin_runner: 4.0.0
                      Dependencies: anyhow 1.0.93,codspeed-criterion-compat 2.7.2,criterion 0.5.1,enumset 1.1.5,futures 0.3.31,once_cell 1.20.2,parking_lot 0.12.3,serde 1.0.214,serde_json 1.0.132,swc_atoms 2.0.0,swc_common 4.0.0,swc_css_ast 4.0.1,swc_css_parser 4.0.0,swc_ecma_ast 4.0.1,swc_ecma_loader 4.0.0,swc_ecma_parser 5.0.0,swc_ecma_visit 4.0.0,swc_malloc 1.0.0,swc_plugin_proxy 4.0.0,testing 4.0.0,tokio 1.41.0,tracing 0.1.40,vergen 9.0.1,virtual-fs 0.16.0,wasmer 4.3.7,wasmer-cache 4.3.7,wasmer-compiler-cranelift 4.3.7,wasmer-wasix 0.27.0

- RuntimeError: out of bounds memory access
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x41293)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_common::plugin::serialized::_::<impl rkyv::Deserialize<swc_common::plugin::serialized::VersionedSerializable<T>,__D> for <swc_common::plugin::serialized::VersionedSerializable<T> as rkyv::Archive>::Archived>::deserialize::hf9f5382e5cfe68e1 (fluentui_next_appdir_directive.wasm[1034]:0x1415b6)
      at swc_common::plugin::serialized::PluginSerializedBytes::deserialize::h1117c4582490e330 (fluentui_next_appdir_directive.wasm[1035]:0x1417db)
      at __transform_plugin_process_impl (fluentui_next_appdir_directive.wasm[900]:0x130928)
      at __transform_plugin_process_impl.command_export (fluentui_next_appdir_directive.wasm[1960]:0x1ba3df)
Import map: aliased to module "next" with subpath "/dist/esm/build/templates/helpers" inside of [project]/

https://nextjs.org/docs/messages/module-not-found

 ⨯ ./node_modules/next/dist/esm/build/templates/pages.js:3:1
Module not found: Can't resolve 'next/dist/esm/build/templates/helpers'
failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'

Caused by:
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.
- RuntimeError: out of bounds memory access

Debug info:
- Execution of <ModuleAssetContext as AssetContext>::process_resolve_result failed
- Execution of apply_module_type failed
- Execution of *EcmascriptExports::needs_facade failed
- Execution of <EcmascriptModuleAsset as EcmascriptChunkPlaceable>::get_exports failed
- Execution of analyse_ecmascript_module failed
- failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'
- Execution of <EcmascriptModuleAsset as EcmascriptParsable>::failsafe_parse failed
- Execution of parse failed
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.

                  Note that if you want to use the os features like filesystem, you need to use `wasi`. Wasm itself does not have concept of filesystem.

                  https://swc.rs/docs/plugin/selecting-swc-core

                  See https://plugins.swc.rs/versions/from-plugin-runner/4.0.0 for the list of the compatible versions.

                  Build info:
                      Date: 2024-11-07
                      Timestamp: 2024-11-07T09:55:40.203904400Z

                  Version info:
                      swc_plugin_runner: 4.0.0
                      Dependencies: anyhow 1.0.93,codspeed-criterion-compat 2.7.2,criterion 0.5.1,enumset 1.1.5,futures 0.3.31,once_cell 1.20.2,parking_lot 0.12.3,serde 1.0.214,serde_json 1.0.132,swc_atoms 2.0.0,swc_common 4.0.0,swc_css_ast 4.0.1,swc_css_parser 4.0.0,swc_ecma_ast 4.0.1,swc_ecma_loader 4.0.0,swc_ecma_parser 5.0.0,swc_ecma_visit 4.0.0,swc_malloc 1.0.0,swc_plugin_proxy 4.0.0,testing 4.0.0,tokio 1.41.0,tracing 0.1.40,vergen 9.0.1,virtual-fs 0.16.0,wasmer 4.3.7,wasmer-cache 4.3.7,wasmer-compiler-cranelift 4.3.7,wasmer-wasix 0.27.0

- RuntimeError: out of bounds memory access
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x41293)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_common::plugin::serialized::_::<impl rkyv::Deserialize<swc_common::plugin::serialized::VersionedSerializable<T>,__D> for <swc_common::plugin::serialized::VersionedSerializable<T> as rkyv::Archive>::Archived>::deserialize::hf9f5382e5cfe68e1 (fluentui_next_appdir_directive.wasm[1034]:0x1415b6)
      at swc_common::plugin::serialized::PluginSerializedBytes::deserialize::h1117c4582490e330 (fluentui_next_appdir_directive.wasm[1035]:0x1417db)
      at __transform_plugin_process_impl (fluentui_next_appdir_directive.wasm[900]:0x130928)
      at __transform_plugin_process_impl.command_export (fluentui_next_appdir_directive.wasm[1960]:0x1ba3df)
Import map: aliased to module "next" with subpath "/dist/esm/build/templates/helpers" inside of [project]/

https://nextjs.org/docs/messages/module-not-found

 ✓ Compiled /_error in 1089ms
 ⨯ Error: Cannot find module 'next/dist/esm/build/templates/helpers'
    at <unknown> (C:\Repos\FluentUI(v9.56.2)-Next(v15.0.3)\my-app\.next\server\chunks\ssr\node_modules_94f0ee._.js:4998:15)
    at [project]/node_modules/next/dist/esm/build/templates/pages.js { INNER_PAGE => "[project]/node_modules/next/error.js [ssr] (ecmascript)", INNER_DOCUMENT => "[project]/node_modules/next/document.js [ssr] (ecmascript)", INNER_APP => "[project]/node_modules/next/app.js [ssr] (ecmascript)" } [ssr] (ecmascript) (C:\Repos\FluentUI(v9.56.2)-Next(v15.0.3)\my-app\.next\server\chunks\ssr\node_modules_94f0ee._.js:5001:3)
    at instantiateModule (C:\Repos\FluentUI(v9.56.2)-Next(v15.0.3)\my-app\.next\server\chunks\ssr\[turbopack]_runtime.js:589:23)
    at instantiateRuntimeModule (C:\Repos\FluentUI(v9.56.2)-Next(v15.0.3)\my-app\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
    at Object.getOrInstantiateRuntimeModule (C:\Repos\FluentUI(v9.56.2)-Next(v15.0.3)\my-app\.next\server\chunks\ssr\[turbopack]_runtime.js:668:12)
    at Object.<anonymous> (C:\Repos\FluentUI(v9.56.2)-Next(v15.0.3)\my-app\.next\server\pages\_error.js:5:26)
    at call (node_modules\next\src\server\require-hook.ts:70:25)
    at require (node_modules\next\src\server\require.ts:121:8)
    at page (node_modules\next\src\server\load-components.ts:189:41)
    at async DevServer.findPageComponentsImpl (node_modules\next\src\server\next-server.ts:779:27)
    at async DevServer.findPageComponents (node_modules\next\src\server\dev\next-dev-server.ts:881:13)
    at async DevServer.renderErrorToResponseImpl (node_modules\next\src\server\base-server.ts:3914:17)
    at async pipe.req.req (node_modules\next\src\server\base-server.ts:3818:25)
    at async DevServer.pipeImpl (node_modules\next\src\server\base-server.ts:1698:20)
    at async NextNodeServer.handleCatchallRenderRequest (node_modules\next\src\server\next-server.ts:1052:8)
    at async DevServer.handleRequestImpl (node_modules\next\src\server\base-server.ts:1462:8)
    at async (node_modules\next\src\server\dev\next-dev-server.ts:514:13)
    at async Span.traceAsyncFn (node_modules\next\src\trace\trace.ts:143:13)
    at async DevServer.handleRequest (node_modules\next\src\server\dev\next-dev-server.ts:512:19)
    at async invokeRender (node_modules\next\src\server\lib\router-server.ts:284:10)
    at async handleRequest (node_modules\next\src\server\lib\router-server.ts:530:15)
    at async requestHandlerImpl (node_modules\next\src\server\lib\router-server.ts:576:6)
    at async Server.requestListener (node_modules\next\src\server\lib\start-server.ts:146:6) {
  code: 'MODULE_NOT_FOUND'
}
 ⨯ ./node_modules/next/dist/esm/build/templates/pages.js:3:1
Module not found: Can't resolve 'next/dist/esm/build/templates/helpers'
failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'

Caused by:
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.
- RuntimeError: out of bounds memory access

Debug info:
- Execution of <ModuleAssetContext as AssetContext>::process_resolve_result failed
- Execution of apply_module_type failed
- Execution of *EcmascriptExports::needs_facade failed
- Execution of <EcmascriptModuleAsset as EcmascriptChunkPlaceable>::get_exports failed
- Execution of analyse_ecmascript_module failed
- failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'
- Execution of <EcmascriptModuleAsset as EcmascriptParsable>::failsafe_parse failed
- Execution of parse failed
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.

                  Note that if you want to use the os features like filesystem, you need to use `wasi`. Wasm itself does not have concept of filesystem.

                  https://swc.rs/docs/plugin/selecting-swc-core

                  See https://plugins.swc.rs/versions/from-plugin-runner/4.0.0 for the list of the compatible versions.

                  Build info:
                      Date: 2024-11-07
                      Timestamp: 2024-11-07T09:55:40.203904400Z

                  Version info:
                      swc_plugin_runner: 4.0.0
                      Dependencies: anyhow 1.0.93,codspeed-criterion-compat 2.7.2,criterion 0.5.1,enumset 1.1.5,futures 0.3.31,once_cell 1.20.2,parking_lot 0.12.3,serde 1.0.214,serde_json 1.0.132,swc_atoms 2.0.0,swc_common 4.0.0,swc_css_ast 4.0.1,swc_css_parser 4.0.0,swc_ecma_ast 4.0.1,swc_ecma_loader 4.0.0,swc_ecma_parser 5.0.0,swc_ecma_visit 4.0.0,swc_malloc 1.0.0,swc_plugin_proxy 4.0.0,testing 4.0.0,tokio 1.41.0,tracing 0.1.40,vergen 9.0.1,virtual-fs 0.16.0,wasmer 4.3.7,wasmer-cache 4.3.7,wasmer-compiler-cranelift 4.3.7,wasmer-wasix 0.27.0

- RuntimeError: out of bounds memory access
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x41293)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_common::plugin::serialized::_::<impl rkyv::Deserialize<swc_common::plugin::serialized::VersionedSerializable<T>,__D> for <swc_common::plugin::serialized::VersionedSerializable<T> as rkyv::Archive>::Archived>::deserialize::hf9f5382e5cfe68e1 (fluentui_next_appdir_directive.wasm[1034]:0x1415b6)
      at swc_common::plugin::serialized::PluginSerializedBytes::deserialize::h1117c4582490e330 (fluentui_next_appdir_directive.wasm[1035]:0x1417db)
      at __transform_plugin_process_impl (fluentui_next_appdir_directive.wasm[900]:0x130928)
      at __transform_plugin_process_impl.command_export (fluentui_next_appdir_directive.wasm[1960]:0x1ba3df)
Import map: aliased to module "next" with subpath "/dist/esm/build/templates/helpers" inside of [project]/

https://nextjs.org/docs/messages/module-not-found

 ⨯ ./node_modules/next/dist/esm/build/templates/pages.js:3:1
Module not found: Can't resolve 'next/dist/esm/build/templates/helpers'
failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'

Caused by:
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.
- RuntimeError: out of bounds memory access

Debug info:
- Execution of <ModuleAssetContext as AssetContext>::process_resolve_result failed
- Execution of apply_module_type failed
- Execution of *EcmascriptExports::needs_facade failed
- Execution of <EcmascriptModuleAsset as EcmascriptChunkPlaceable>::get_exports failed
- Execution of analyse_ecmascript_module failed
- failed to analyse ecmascript module '[project]/node_modules/next/dist/esm/build/templates/helpers.js [ssr] (ecmascript)'
- Execution of <EcmascriptModuleAsset as EcmascriptParsable>::failsafe_parse failed
- Execution of parse failed
- failed to parse [project]/node_modules/next/dist/esm/build/templates/helpers.js
- Transforming and/or parsing of [project]/node_modules/next/dist/esm/build/templates/helpers.js failed
- failed to run Wasm plugin transform. Please ensure the version of `swc_core` used by the plugin is compatible with the host runtime. See the documentation for compatibility information. If you are an author of the plugin, please update `swc_core` to the compatible version.

                  Note that if you want to use the os features like filesystem, you need to use `wasi`. Wasm itself does not have concept of filesystem.

                  https://swc.rs/docs/plugin/selecting-swc-core

                  See https://plugins.swc.rs/versions/from-plugin-runner/4.0.0 for the list of the compatible versions.

                  Build info:
                      Date: 2024-11-07
                      Timestamp: 2024-11-07T09:55:40.203904400Z

                  Version info:
                      swc_plugin_runner: 4.0.0
                      Dependencies: anyhow 1.0.93,codspeed-criterion-compat 2.7.2,criterion 0.5.1,enumset 1.1.5,futures 0.3.31,once_cell 1.20.2,parking_lot 0.12.3,serde 1.0.214,serde_json 1.0.132,swc_atoms 2.0.0,swc_common 4.0.0,swc_css_ast 4.0.1,swc_css_parser 4.0.0,swc_ecma_ast 4.0.1,swc_ecma_loader 4.0.0,swc_ecma_parser 5.0.0,swc_ecma_visit 4.0.0,swc_malloc 1.0.0,swc_plugin_proxy 4.0.0,testing 4.0.0,tokio 1.41.0,tracing 0.1.40,vergen 9.0.1,virtual-fs 0.16.0,wasmer 4.3.7,wasmer-cache 4.3.7,wasmer-compiler-cranelift 4.3.7,wasmer-wasix 0.27.0

- RuntimeError: out of bounds memory access
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x41293)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_ecma_ast::stmt::_::<impl rkyv::Deserialize<swc_ecma_ast::stmt::Stmt,__D> for <swc_ecma_ast::stmt::Stmt as rkyv::Archive>::Archived>::deserialize::h2e0e7796dd00e450 (fluentui_next_appdir_directive.wasm[195]:0x412d6)
      at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h9ba16d7e99f2ea24 (fluentui_next_appdir_directive.wasm[196]:0x43055)
      at swc_common::plugin::serialized::_::<impl rkyv::Deserialize<swc_common::plugin::serialized::VersionedSerializable<T>,__D> for <swc_common::plugin::serialized::VersionedSerializable<T> as rkyv::Archive>::Archived>::deserialize::hf9f5382e5cfe68e1 (fluentui_next_appdir_directive.wasm[1034]:0x1415b6)
      at swc_common::plugin::serialized::PluginSerializedBytes::deserialize::h1117c4582490e330 (fluentui_next_appdir_directive.wasm[1035]:0x1417db)
      at __transform_plugin_process_impl (fluentui_next_appdir_directive.wasm[900]:0x130928)
      at __transform_plugin_process_impl.command_export (fluentui_next_appdir_directive.wasm[1960]:0x1ba3df)
Import map: aliased to module "next" with subpath "/dist/esm/build/templates/helpers" inside of [project]/

https://nextjs.org/docs/messages/module-not-found

This error makes it impossible for the page to load and display the <Button/> component, also the following error prompt is displayed in the page when running in Development mode, it is the same error as I got in the console. error image

My team at Microsoft is planning to start a new web project and we must use the latest Fluent UI to be compliant. According to the latest React docs it is no longer recommended using React without a Framework, and as part of the production ready options they encourage people to use we can find Next.

It is worth mentioning that I also tried to add and use @fluentui/react-components in a Remix project, but I also got many errors, anyway, Remix is never mentioned in the Fluent UI v9 docs, so I assumed it is simply not supported.

Expected Behavior

  1. I expect the documentation from Concepts / Developer / Server-Side Rendering / Next.js appDir setup - Docs ⋅ Storybook to work.
  2. I expect to be able to use latest stable Next Framework along with latest stable @fluentui/react-components and latest stable @fluentui/react-icons for building projects.
  3. I expect to be able to implement Server Side Rendering (SSR) using any React component from @fluentui/react-components or icon from @fluentui/react-icons when using latest stable Next.

Reproduction

https://github.com/dorianco-microsoft/fluentui9-next15.git

Steps to reproduce

  1. Clone the project.
  2. Go into /my-app folder.
  3. Run npm install to install all dependencies.
  4. Run npm run dev to start the project.
  5. Check the terminal logs.
  6. Try opening the app at http://localhost:3000

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

Development of Microsoft Game Developer Support platform

Are you willing to submit a PR to fix?

no

Validations

sopranopillow commented 3 days ago

currently working on making the plugin work again: https://github.com/sopranopillow/fluentui-nextjs-appdir-plugin/issues/5

sopranopillow commented 2 days ago

Plugin works again, but will take a closer look at the rest of the issue's points.