[🐞]React Integration issues -

[georgetakla]

Which component is affected?

Qwik React

Describe the bug

I am integrating React to use @FluentUI/react-components.
1- building the project shows 2000+ messages from node_modules @mui+matrials on "use client" was ignored.
2- can not start the project hence errors in src/integrations/react/mui.tsx - but can workaround it
3- Add ESM package of @fluentui/react-components and use Input module errs on runtime trying to use CommonJS ->
Error: [vite] Named export 'Input' not found. The requested module '@fluentui/react-components' is a CommonJS module, which may not support all module.exports as named exports.

Reproduction

https://github.com/georgetakla/qwik-test.git

Steps to reproduce

1-created qwik project from latest : pnpm create qwik@latest
2-successfully started the project: pnpm run build && pnpm run dev.debug
3- I added react : pnpm run qwik add react
4- @mui is installed
5- pnpm run build ->you will get 2000+ messages from node_modules @mui+matrials on "use client" was ignored.
6- pnpm run dev.debug - >Start the project and you will get errors on src/integrations/react/mui.tsx on deprecated DataGrid props of pageSize, rowsPerPageOptions, anddisableSelectionOnClick.

        <DataGrid
          rows={rows}
          columns={columns}
          // pageSize={5}
          // rowsPerPageOptions={[5]}
          checkboxSelection
          // disableSelectionOnClick
        />
      </div>

7- remove these props and you can run the project
8- pnpm install @fluentui/react-components ( supports ESM)
9- add a react component using Input from @fluentui/react-components ( check repo)
10 - pnpm run build & pnpm run dev.debug -> error

[vite] Named export 'Input' not found. The requested module '@fluentui/react-components' 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 '@fluentui/react-components';
const {Input} = pkg;

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 645.45 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
    pnpm: 9.7.0 - ~/.nvm/versions/node/v20.3.0/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @builder.io/qwik: ^1.9.0 => 1.9.0 
    @builder.io/qwik-city: ^1.9.0 => 1.9.0 
    @builder.io/qwik-react: 0.5.0 => 0.5.0 
    typescript: 5.4.5 => 5.4.5 
    undici: * => 6.19.8 
    vite: 5.3.5 => 5.3.5

Additional Information

// src/route/index.tsx
import { component$, useSignal, $ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import {QwikFluentInput} from './InputComponent'
 

export default component$(() => {

  // Define the signal for input value
  const inputValue = useSignal('');

  // Handle input change event
  const handleInputChange = $((event: Event) => {
    const target = event.target as HTMLInputElement;
    inputValue.value = target.value; // Update the signal value
  });
  return (
    <>
      <h1>Hi 👋</h1>
      <div>
        <h1>Qwik Fluent UI Input with Lazy Loading</h1>
        <QwikFluentInput
          placeholder="Type something..."
          value={inputValue.value}
          onChange={handleInputChange}
        />
        <p>Current Input: {inputValue.value}</p>
      </div>
    </>
  );
});

export const head: DocumentHead = {
  title: "Welcome to Qwik",
  meta: [
    {
      name: "description",
      content: "Qwik site description",
    },
  ],
};

// inputComponent.tsx

// This pragma is required so that React JSX is used instead of Qwik JSX
/** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import {Input} from '@fluentui/react-components'

// Wrap the Input component with qwikify$ to make it work with Qwik
export const QwikFluentInput = qwikify$((props: any) => {
  return (
    <Input {...props} />
  );
});

[wmertens]

@georgetakla Did you try the solution Vite proposes?

[vite] Named export 'Input' not found. The requested module '@fluentui/react-components' 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 '@fluentui/react-components';
const {Input} = pkg;

[georgetakla]

@wmertens yes, I did. it did not work.
I also tried

legacy: {proxySsrExternalModules: true,}

but, it partially worked as it failed on @fluentui/react-icon