Calcite Components with Webpack 5

BradSnider — Thu, 27 May 2021 20:46:02 GMT

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?

Re: Calcite Components with Webpack 5

LucasScharenbroich — Fri, 01 Apr 2022 21:28:22 GMT

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

You'll need to manually tweak this each time you run npm install, unfortunately.

topic Calcite Components with Webpack 5 in Calcite Design System Questions

Calcite Components with Webpack 5

Re: Calcite Components with Webpack 5