Can't compile @fluentui/react

[baurine]

I use @fluentui/react components in my react project, it works fine if I don't install esbuild-plugin-postcss2. After installing this plugin, it will report errors when compiling the @fluentui/react.

$ NODE_ENV=production node builder.js
 > node_modules/@fluentui/react/lib/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.js:2:7: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/@fluentui/react/lib/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.scss'
     2 │ import './ExtendedPeoplePicker.scss';
       ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
    65 │     build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
       ╵           ~~~~~~~~~
    at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
    at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)
    at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17
    at new Promise (<anonymous>)
    at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)
    at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25
    at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)

 > node_modules/@fluentui/react/lib/components/ExtendedPicker/BaseExtendedPicker.js:5:30: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/@fluentui/react/lib/components/ExtendedPicker/BaseExtendedPicker.scss'
     5 │ import * as stylesImport from './BaseExtendedPicker.scss';
       ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~
   node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
    65 │     build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
       ╵           ~~~~~~~~~
    at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)

But I think the root reason is caused by esbuild self, so I report the issue to esbuild as well:

• [bug] compile @fluentui/react fail after using esbuild-plugin-postcss2 evanw/esbuild#1834

[fragsalat]

Again here, I would recommend you to switch to the esbuild-style-plugin. It's maintained and working in this regards

[baurine]

Again here, I would recommend you to switch to the esbuild-style-plugin. It's maintained and working in this regards

Thanks for your advice, I will have a try.