[bug] compile @fluentui/react fail after using esbuild-plugin-postcss2

[baurine]

Reproduce steps

1. Initial a react project by npx esbuild-create-react-app my-app, choose TypeScript template. esbuild-create-react-app

2. Install @fluentui/react by running yarn add @fluentui/react

3. Test @fluentui/react components:

   // src/App.tsx
   import { DatePicker, PrimaryButton } from '@fluentui/react'
   
   export default function App() {
     return (
       <div>
         Hello World!
         <PrimaryButton>Hello Fluent UI</PrimaryButton>
         <DatePicker />
       </div>
     )
   }

4. Running yarn build or yarn start, works fine.

   

   Demo code: miscs-test/esbuild-demo@d6eb07c

5. Install esbuild-plugin-postcss2 to help comiple .less CSS, but it tasks over .css/.scss/.styl as well. Running yarn add -D esbuild-plugin-postcss2.

6. Config esbuild options:

   const postCssPlugin = require('esbuild-plugin-postcss2')
   
   const buildParams = {
       // ...
       plugins: [postCssPlugin.default({})]
   }

7. Running yarn build or yarn start, report the following errors:

   > 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)
   

   After investigating, it is true that 'node_modules/@fluentui/react/lib/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.scss' doesn't exist, but exist ExtendedPeoplePicker.scss.js.

   

   So, although this error is thrown by esbuild-plugin-postcss2, I think the root reason comes from esbuild self. It doesn't check whether exist the .js file before passing it to the esbuild-plguin-postcss2 plugin.

   Demo code: miscs-test/esbuild-demo@1a057d9

Workaround

I work around this issue by hacking the esbuild-plugin-postcss2 code in the node_modules, I add the logic to check if it exists the corresponding .js file, just return it back to esbuild self to handle it.

        if (!sourceFullPath)
          sourceFullPath = path.resolve(args.resolveDir, args.path);

        // hack
        let exist = existsSync(sourceFullPath + ".js");
        if (exist) {
          return;
        }

[evanw]

This is by design. When plugins take control of module resolution, they are in control. If they are doing the wrong thing then that's a problem with the plugin, not with esbuild, and the plugin should be changed to avoid the issue. Arguably that package could also be changed to not use such problematic file names.

[baurine]

hi @evanw , thanks for your reply.

I agree with you that if @fluentui/react doesn't use the problematic file names that would be much better, but it is reasonable behavior, when we import a file, we can omit the .ts/.tsx/.js/.jsx suffix.

If we let the plugins do this check, every plugin needs to implement the check ideally, that doesn't make sense very much.

And I believe the esbuild does this check (in this case it means resolve the xx.scss to xx.scss.js correctly) because it can compile the @fluentui/react successfully when we don't install the esbuild-plugin-postcss2. I think we just need to move the check logic before calling plugins. If we do so, esbuild knows xx.scss is xx.scss.js, so it will compile it by esbuild self, won't call the esbuild-plugin-postcss2 instead.

Not sure whether I explain it clearly.

[fragsalat]

Just wanted to line out that with the above merged pr the esbuild-style-plugin works like a charm with fluentui. It also supports css modules and sass/less/stylus etc and is working for me as I would like to have it.

const esbuild = require('esbuild');
const stylePlugin = require('esbuild-style-plugin');
const less = require('postcss-less');

esbuild.build({
  logLevel: 'info',
  bundle: true,
  entryPoints: ['src/index.tsx'],
  outdir: 'dist',
  target: 'es2020',
  loader: {
    '.js': 'jsx'
  },
  plugins: [
    stylePlugin({
      postcss: {parser: less},
      cssModulesOptions: {
        getJSON: () => { },
        generateScopedName: "[name]__[local]___[hash:base64:5]"
      }
    })
  ]
})

[evanw]

After the original comment for this issue was posted, esbuild exposed a resolve API to plugins that I believe could be used by this plugin to handle this case: https://github.com/evanw/esbuild/releases/v0.14.8. So I'm closing this issue because I believe that it's now relatively straightforward for plugins to handle this correctly.