You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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;
// 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} />
);
});
The text was updated successfully, but these errors were encountered:
@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;
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.
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
System Info
Additional Information
The text was updated successfully, but these errors were encountered: