Closed raldone01 closed 3 years ago
You still use webpack@4, nothing to fix on our side
I am pretty sure I am using webpack 5.
I Patched the apply function of your plugin:
I added the following line: console.log(`Reached webpack 5 code in the compresssion plugin: ${_webpack.version[0]}`)
apply(compiler) {
const pluginName = this.constructor.name;
if (CompressionPlugin.isWebpack4()) {
// eslint-disable-next-line global-require
const CacheEngine = require("./Webpack4Cache").default;
const weakCache = new WeakMap();
compiler.hooks.emit.tapPromise({
name: pluginName
}, compilation => // eslint-disable-next-line no-undefined
this.compress(compilation, undefined, CacheEngine, weakCache));
} else {
// ADD LOG LINE
console.log(`Reached webpack 5 code in the compresssion plugin: ${_webpack.version[0]}`)
// eslint-disable-next-line global-require
const CacheEngine = require("./Webpack5Cache").default;
compiler.hooks.thisCompilation.tap(pluginName, compilation => {
// eslint-disable-next-line global-require
const Compilation = require("webpack/lib/Compilation");
compilation.hooks.processAssets.tapPromise({
name: pluginName,
stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER
}, assets => this.compress(compilation, assets, CacheEngine));
compilation.hooks.statsPrinter.tap(pluginName, stats => {
stats.hooks.print.for("asset.info.compressed").tap("compression-webpack-plugin", (compressed, {
green,
formatFlag
}) => // eslint-disable-next-line no-undefined
compressed ? green(formatFlag("compressed")) : undefined);
});
});
}
}
Output:
See the Reached webpack 5 code in the compresssion plugin: 5
line in the following log.
C:\Users\_\Desktop\prmaster\vue\web\site>pnpm build
> @feather-ink/site@1.0.0 build C:\Users\_\Desktop\prmaster\vue\web\site
> set NODE_ENV=production && set PRODUCTION=true && node scripts/buildProd.js
- Building for production...
Reached webpack 5 code in the compresssion plugin: 5
Starting type checking service...
Using 1 worker with 2048MB memory limit
ERROR TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined
at C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\compression-webpack-plugin\6.1.1_webpack@5.6.0\node_modules\compression-webpack-plugin\dist\index.js:350:41
at SyncHook.eval [as call] (eval at create (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:1)
at SyncHook.lazyCompileHook (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\Hook.js:154:20)
at Compiler.newCompilation (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\Compiler.js:630:30)
at C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\Hook.js:154:20)
at Compiler.compile (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\Compiler.js:662:28)
at C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\Compiler.js:321:11
at Compiler.readRecords (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\Compiler.js:529:11)
at C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\Compiler.js:318:10
at eval (eval at create (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
at C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\webpack\4.44.2_93ca2875a658e9d1552850624e6b91c7\node_modules\webpack\lib\CachePlugin.js:50:13
at _next0 (eval at create (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:8:1)
at eval (eval at create (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\tapable\1.1.3\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:21:1)
at run (C:\Users\_\Desktop\prmaster\vue\web\common\temp\node_modules\.pnpm\registry.npmjs.org\fork-ts-checker-webpack-plugin\3.1.1\node_modules\fork-ts-checker-webpack-plugin\lib\index.js:248:13)
ERROR Command failed with exit code 1.
Even if I was using webpack 4 shouldn't it work? Is webpack 4 not supported? Please consider reopening this issue.
fork-ts-checker-webpack-plugin
is incompatibility with webpack@5, it patched webpack and do it in wrong way, so I don't think what we should fix here, another related issue - https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/540
Thank you for this information. I didn't notice this at all as I was using vue and it implicitly adds the fork-ts-checker-webpack-plugin
. I was really confused while checking your code. I have read the webpack plugin documentation and everything seemed correct.
So it is not your fault sorry.
Don't worry, plugins are power and weakness, we have been working for a long time to provide as much api as possible to avoid patching, but some plugins still use this, so developers got these problems :disappointed:
Sorry, I'm getting the same error and I'm a bit lost. Here's the log:
TypeError: Cannot read property 'tapPromise' of undefined
at /ROOT/PROJECT/node_modules/compression-webpack-plugin/dist/index.js:269:39
at SyncHook.eval [as call] (eval at create (/ROOT/PROJECT/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:17:1)
at SyncHook.lazyCompileHook (/ROOT/PROJECT/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/ROOT/PROJECT/node_modules/webpack/lib/Compiler.js:631:26)
at /ROOT/PROJECT/PROJECT/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/ROOT/PROJECT/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
at AsyncSeriesHook.lazyCompileHook (/ROOT/PROJECT/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/ROOT/PROJECT/node_modules/webpack/lib/Compiler.js:662:28)
at /ROOT/PROJECT/node_modules/webpack/lib/Watching.js:77:18
at _next0 (eval at create (/ROOT/PROJECT/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)
at eval (eval at create (/ROOT/PROJECT/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:44:1)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! PROJECT@3.0.0 start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the PROJECT@3.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I'm using Webpack 4.44.2 in my React app (Built over CRA). I find CompressionPlugin as a common 'webpack' way to reduce my bundle size, but whenever I add CompressionPlugin to my webpack.config.js
, I get this error.
https://github.com/webpack-contrib/compression-webpack-plugin/releases/tag/v7.0.0
minimum supported webpack version is ^5.1.0
For anyone running into this issue using create-react-app version 4, it uses webpack 4 so compression-webpack-plugin
needs to be locked to version 6.1.1
.
Same for vue-cli 4.5.11
I am on webpack 4 through CRA 4, but pinning the plugin to 6.1.1 is still giving me the tapPromise error. Tried a bunch of different versions as well but no luck.
TypeError: Cannot read property 'tapPromise' of undefined
at CompressionPlugin.apply (/<root>/node_modules/compression-webpack-plugin/dist/index.js:337:27)
at /<root>/node_modules/webpack/node_modules/enhanced-resolve/lib/ResolverFactory.js:345:10
at Array.forEach (<anonymous>)
at Object.exports.createResolver (/<root>/node_modules/webpack/node_modules/enhanced-resolve/lib/ResolverFactory.js:344:10)
at ResolverFactory._create (/<root>/node_modules/webpack/lib/ResolverFactory.js:57:28)
at ResolverFactory.get (/<root>/node_modules/webpack/lib/ResolverFactory.js:49:28)
at NormalModuleFactory.getResolver (/<root>/node_modules/webpack/lib/NormalModuleFactory.js:521:31)
at /<root>/node_modules/webpack/lib/NormalModuleFactory.js:165:32
at /<root>/node_modules/webpack/lib/NormalModuleFactory.js:129:4
at /<root>/node_modules/webpack/lib/NormalModuleFactory.js:400:5
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/<root>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
at AsyncSeriesWaterfallHook.lazyCompileHook (/<root>/node_modules/tapable/lib/Hook.js:154:20)
at NormalModuleFactory.create (/<root>/node_modules/webpack/lib/NormalModuleFactory.js:381:28)
at /<root>/node_modules/webpack/lib/Compilation.js:1063:18
at Semaphore.acquire (/<root>/node_modules/webpack/lib/util/Semaphore.js:29:4)
at Compilation._addModuleChain (/<root>/node_modules/webpack/lib/Compilation.js:1062:1
run npm ls webpack
and you will see
What are you hinting at?
├─┬ compression-webpack-plugin@6.1.1
│ └─┬ webpack@4.44.2
│ └─┬ terser-webpack-plugin@1.4.5
│ └── webpack@4.44.2 deduped
└─┬ react-scripts@4.0.3
├─┬ @pmmmwh/react-refresh-webpack-plugin@0.4.3
│ └── webpack@4.44.2 deduped
├─┬ babel-loader@8.1.0
│ └── webpack@4.44.2 deduped
├─┬ css-loader@4.3.0
│ └── webpack@4.44.2 deduped
├─┬ eslint-webpack-plugin@2.5.4
│ └── webpack@4.44.2 deduped
├─┬ file-loader@6.1.1
│ └── webpack@4.44.2 deduped
├─┬ html-webpack-plugin@4.5.0
│ └── webpack@4.44.2 deduped
├─┬ mini-css-extract-plugin@0.11.3
│ └── webpack@4.44.2 deduped
├─┬ optimize-css-assets-webpack-plugin@5.0.4
│ └── webpack@4.44.2 deduped
├─┬ sass-loader@10.2.0
│ └── webpack@4.44.2 deduped
├─┬ style-loader@1.3.0
│ └── webpack@4.44.2 deduped
├─┬ terser-webpack-plugin@4.2.3
│ └── webpack@4.44.2 deduped
├─┬ url-loader@4.1.1
│ └── webpack@4.44.2 deduped
├─┬ webpack-dev-server@3.11.1
│ ├─┬ webpack-dev-middleware@3.7.3
│ │ └── webpack@4.44.2 deduped
│ └── webpack@4.44.2 deduped
├─┬ webpack-manifest-plugin@2.2.0
│ └── webpack@4.44.2 deduped
├── webpack@4.44.2 deduped
└─┬ workbox-webpack-plugin@5.1.4
└── webpack@4.44.2 deduped
check global installed packages, you can use webpack-cli
globally installed and npm v5 automatically install webpack v5
Thanks for the quick reply, no I don't have any global webpack related packages besides create-react-app, which is also pinned to the latest v4
It tries to use the emit hook which doesn't exist in my compiler.hooks
if (CompressionPlugin.isWebpack4()) {
// eslint-disable-next-line global-require
const CacheEngine = require("./Webpack4Cache").default;
const weakCache = new WeakMap();
compiler.hooks.emit.tapPromise({
name: pluginName
}, compilation => // eslint-disable-next-line no-undefined
this.compress(compilation, undefined, CacheEngine, weakCache));
}
I figured it out. I added the plugin to the wrong section, so it got called with the resolver instead of compiler, sorry!
Same for vue-cli 4.5.13. so i must use compression-webpack-plugin on version 6.1.1. ? thanks your help first !
yes, for webpack v4 you need to use 6.1.1
@alexander-akait
Here is my dependencies
And I use 6.1.1
it appear
Please use compression-webpack-plugin@4
for webpack v4
@alexander-akait thanks for your timely reply, but it not work as expect
Expected Behavior
The specified files are compressed.
Actual Behavior
Crash with the following error:
It appears that the processAssets hook doesn't exist?
Code
How Do We Reproduce?
pnpm run serve
Possibly related to #222.