TypeError: The 'compilation' argument must be an instance of Compilation

[s-kris]

Bug description

Build is failed when using next-css plugin

Reproduction steps

1. Add @zeit/next-css plugin to next.config.js
2. import a css file in tsx component
3. build

esbuild-loader will fail during build with TypeError: The 'compilation' argument must be an instance of Compilation

Environment

• esbuild-loader version: 2.9.2
• Webpack version: 5.24.2
• Operating System: macOS 10.15.7
• Node version: 14.4.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.0

More info

Build is successful if next-css plugin is removed and also it works well with next-images plugin.

[privatenumber]

Thanks for the issue @s-kris

Sounds like some setup is required for reproducing this. Do you mind sharing a minimal reproduction repo?

[s-kris]

Thank you so much for your work @privatenumber Here's a minimal repo: https://github.com/s-kris/test-esbuild-custom-server-typescript-app (do checkout the commit log)

Note: I just saw that vercel deprecated this particular module because they want to move css files to _app or use module css system. Edit: I'm upgrading nextjs version to latest and follow the new approach

So, please decide if it's worth your time.

More questions:

1. My build time dropped to 70 seconds from 150 seconds with esbuild-loader. That's lovely. But is there some way to achieve more speed? esbuild touts 100x :)
2. Do you plan for type-checking support?

I have absolutely no experience in cli/build/compiler tools, but I'm super excited to learn and contribute :)

[privatenumber]

You're getting the type error because esbuild-loader currently uses Webpack 4 types. I'm interested in supporting both Webpack 4 and 5 types in the future. It's a known issue but I'll leave this open till it's addressed.

RE: is there some way to achieve more speed? esbuild touts 100x Running esbuild as a bundler vs esbuild-loader + Webpack are completely different. esbuild is highly optimized and is purely in Golang; you'll get 100x if you let it handle your entire build. esbuild-loader is handled by Webpack (in JS runtime) and transforms are applied per-file so there's a relatively large bottleneck that makes reaching those speeds impossible. It's just that babel-loader/ts-loader/Terser are so much slower so esbuild-loader can offer pretty big speed gains by removing the bottleneck there.

RE: Do you plan for type-checking support? esbuild-loader is more or less just a Webpack wrapper for esbuild, so you'll want to direct your question at esbuild instead. Looks like it's already answered here but if you have a compelling case you can always open a feature request.

[s-kris]

Thanks for the detailed answers :)

[privatenumber]

Keeping this open as I'd still like to resolve the Wepback 5 types issue

[ghost]

+1