Community

Calcite Components with Webpack 5

1457
1
05-27-2021 01:46 PM
Labels (1)
Labels
BradSnider
by
New Contributor II
‎05-27-2021 01:46 PM

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?

Tags (2)
1 Reply
LucasScharenbroich
by
Occasional Contributor
‎03-31-2022 10:16 AM

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) => { 
to
 
        compiler.hooks.emit.tap('StencilPlugin', (compilation, callback) => {
You'll need to manually tweak this each time you run npm install, unfortunately.
0 Kudos