I am trying to incorporate Calcite Components into a Webpack 5 app. After following the steps outlined in the readme and then serving the app, I get the following error:
[webpack-cli] TypeError: compiler.plugin is not a function
at StencilPlugin.apply (C:\projects\R9-CentralBasin\node_modules\@stencil\webpack\dist\index.js:14:18)
at createCompiler (C:\projects\R9-CentralBasin\node_modules\webpack\lib\webpack.js:71:12)
at create (C:\projects\R9-CentralBasin\node_modules\webpack\lib\webpack.js:118:16)
at webpack (C:\projects\R9-CentralBasin\node_modules\webpack\lib\webpack.js:142:32)
at WebpackCLI.f [as webpack] (C:\projects\R9-CentralBasin\node_modules\webpack\lib\index.js:54:15)
at WebpackCLI.createCompiler (C:\projects\R9-CentralBasin\node_modules\webpack-cli\lib\webpack-cli.js:1847:29)
at async Command.<anonymous> (C:\projects\R9-CentralBasin\node_modules\@webpack-cli\serve\lib\index.js:81:30)
at async Promise.all (index 1)
at async Command.<anonymous> (C:\projects\R9-CentralBasin\node_modules\webpack-cli\lib\webpack-cli.js:1284:13)
After some research, it appears stencil is no longer compatible, since the compiler.plugin api was removed in webpack@5. Is there another way to use Calcite Components with Webpack 5?
The patch to fix this issue is here: https://github.com/ionic-team/stencil-webpack/pull/9/files
Go into the node_modules\@stencil\webpack\dist\index.js file and change line 14 from
compiler.plugin('emit', (compilation, callback) => {
compiler.hooks.emit.tap('StencilPlugin', (compilation, callback) => {