[Bug report] TypeError: Cannot read properties of undefined (reading 'tapAsync')

diegoazh commented 2 years ago

[x] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

clone the repository [gmap-vue](https://github.com/diegoazh/gmap-vue) and run pnpm install and pnpm run build

What is expected?

Build without errors.

What is actually happening?

It throws the above error when you run vuepress build docs

TypeError: Cannot read properties of undefined (reading 'tapAsync')
    at /mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/vue-server-renderer@2.6.14/node_modules/vue-server-renderer/server-plugin.js:52:39
    at SyncHook.eval [as call] (eval at create (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:11:1)
    at SyncHook.lazyCompileHook (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:631:26)
    at /mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:662:28)
    at /mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:529:11)
    at /mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:318:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/Hook.js:154:20)
    at /mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/Compiler.js:315:19
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/mnt/datos2/projects/npm-libs/gmap-vue/node_modules/.pnpm/tapable@1.1.3/node_modules/tapable/lib/Hook.js:154:20)
 ELIFECYCLE  Command failed with exit code 1.

Other relevant information

The bug brokes the build process, I think is something related to webpack or vue-server-renderer, the above output is the error throwed by vuepress when I run vuepress build docs, I'm using pnpm as a package manager and when I include "webpack":"~4.0.0" in the package.json it works for the first time but if I run again pnpm install at the root level (the project is a monorepo) in the next execution of vuepress build docs it fails with the above error. Another detail is that I'm using my package in the vuepress repo, I mean "gmap-vue": "worspace:../gmap-vue" and that package is using webpack 5; I'm not sure if that can be a problem but is another important detail. Another interesting detail is that vuepress dev docs works well without throwing errors.

Output of npx vuepress info in my VuePress project:

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0
  npmPackages:
    @vuepress/core: Not Found
    @vuepress/theme-default: Not Found
    vuepress: ^1.8.2 => 1.8.2 
  npmGlobalPackages:
    vuepress: Not Found

diegoazh commented 2 years ago

I solved my issue by adding the following configuration to .vuepress/config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");

module.exports = {
  ...
  configureWebpack: (config, isServer) => {
    configureWebpack: (config) => {
      return {
        plugins: [
          new HtmlWebpackPlugin(),
          new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
        ],
      };
    };
  },
};

This issue is SOLVED!!!

diegoazh commented 2 years ago

UPDATE 2022-02-10 Unfortunately, the issue persists on GitHub actions and the build always fails. I debugged the process and I don't know the vue-server-renderer package is using webpack 5.68.0 Screenshot from 2022-02-10 16-20-03 and becuase of that compilation.hooks.processAssets is undefined I think this is because in one of the pacakges of the monorepo I had installed webpack 5 and vuepress install webpack 4, but I'm not sure.

diegoazh commented 2 years ago

Ok, the problem was due to I was using different versions of Webpack in different packages of the mono-repo, as a workaround inside GitHub actions I remove the pnpm workspace file then run install inside the package itself and then executes the build process of Vuepress. How this problem is not related to Vuepress it can be considered as resolved. Note: finally I removed the HtmlWebpackPlugin and HtmlWebpackInlineSourcePlugin from the package.json and the Vuepress config file.

linbudu599 commented 2 years ago

Facing the same error in pnpm workspace too...

Merlin218 commented 2 years ago

It can be solved with the webpack version under “webpack@^5.0.0”

diegoazh commented 2 years ago

you will need to use the workaround, is something annoying but it works.

xon52 commented 1 year ago

I had this problem (caused by a monorepo that used Webpack 5), but easily solved it by installing webpack@4 as part of my GH workflow:

fmvnow commented 1 year ago

I had this problem (caused by a monorepo that used Webpack 5), but easily solved it by installing webpack@4 as part of my GH workflow:

The @xon52 solution solved my problem too. Really Thanks for the contribution

yanbo0039 commented 1 year ago

没有一大陆人遇到这个问题吗？

yanbo0039 commented 1 year ago

ziofat commented 1 year ago

@diegoazh Hi, is there a pnpm issue related to this?

diegoazh commented 1 year ago

@ziofat maybe, but I don't think so.

ziofat commented 1 year ago

After digging up, I believe this is not because of pnpm. If you are using pnpm workspace and have webpack 5 installed in another package, the vue-server-renderer will resolve to webpack 5.

vue-server-renderer has require('webpack') in its generated code but it does not have webpack in its package.json dependencies, which causes it to resolve to webpack installed by another package, and automatically detect the version as 5 and use v5 APIs which are not compatible with VuePress.

The issue should be address by vue-server-renderer itself which is generated in Vue, because it has irregular package.json.

A workaround is using pnpmfile.js to add the dependency:

function readPackage(packageJson, context) {

  if (packageJson.name === 'vue-server-renderer') {
    packageJson.dependencies['webpack'] = '^4.0.0';
  }

  return packageJson;
}

CaiWenlie commented 11 months ago

npm i vue-server-renderer@2.5.22 -D

wangwei1237 commented 10 months ago

I had this problem (caused by a monorepo that used Webpack 5), but easily solved it by installing webpack@4 as part of my GH workflow:

I fixed the same problem with this method.

vuejs / vuepress