search

web-infra-dev / rsdoctor

A one-stop build analyzer for Rspack and webpack.
https://rsdoctor.dev/
MIT License
420 stars 33 forks source link

[Bug]: × [html-rspack-plugin]: × Module build failed: #197

Closed liyincode closed 3 months ago

liyincode commented 7 months ago

Version

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 273.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 122.0.6261.69
    Safari: 17.2.1
  npmPackages:
    @rsdoctor/rspack-plugin: ^0.1.3 => 0.1.3

Details

I created the vue2 project using pnpm create rsbuild@latest, then pnpm add @rsdoctor/rspack-plugin -D to add the rsdoctor, set RSDOCTOR=true in the .env file, and then npm run dev, and see this error

npm run dev

> rsbuild-vue2@1.0.0 dev
> rsbuild dev --open

  Rsbuild v0.4.8

info    Port 8080 is in use, using port 8083.

info    @rsdoctor/rspack-plugin enabled.
  > Local:    http://localhost:8083/
  > Network:  http://192.168.50.29:8083/

start   Compiling...
error   Compile error:
Failed to compile, check the errors for troubleshooting.
× [html-rspack-plugin]:   × Module build failed:
  │   ╰─▶   × TypeError: Cannot read properties of undefined (reading 'loaders')
  │         │     at /Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsdoctor+core@0.1.3/node_modules/@rsdoctor/core/dist/inner-plugins/plugins/loader.js:67:36
  │         │     at Hook.eval [as call] (eval at create (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:19:10),
  │       <anonymous>:9:1)
  │         │     at Hook.CALL_DELEGATE [as _call] (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/Hook.js:14:14)
  │         │     at runLoaders (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rspack+core@0.5.5_@swc+helpers@0.5.3/node_modules/@rspack/core/dist/loader-runner/index.js:505:77)
  │         │
  │
  │   help: File was processed with this loader: '/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/html-rspack-plugin@5.6.1_@rspack+core@0.5.5_webpack@5.90.3/node_modules/html-rspack-
  │         plugin/lib/loader.js'
  │
  │ /Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsbuild+core@0.4.8_webpack@5.90.3/node_modules/@rsbuild/core/static/template.html:31
  │             throw e;
  │             ^
  │
  │ Error:   × Module build failed:
  │   ╰─▶   × TypeError: Cannot read properties of undefined (reading 'loaders')
  │         │     at /Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsdoctor+core@0.1.3/node_modules/@rsdoctor/core/dist/inner-plugins/plugins/loader.js:67:36
  │         │     at Hook.eval [as call] (eval at create (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:19:10),
  │       <anonymous>:9:1)
  │         │     at Hook.CALL_DELEGATE [as _call] (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/Hook.js:14:14)
  │         │     at runLoaders (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rspack+core@0.5.5_@swc+helpers@0.5.3/node_modules/@rspack/core/dist/loader-runner/index.js:505:77)
  │         │
  │
  │   help: File was processed with this loader: '/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/html-rspack-plugin@5.6.1_@rspack+core@0.5.5_webpack@5.90.3/node_modules/html-rspack-
  │         plugin/lib/loader.js'
  │
  │     at ./node_modules/.pnpm/html-rspack-plugin@5.6.1_@rspack+core@0.5.5_webpack@5.90.3/node_modules/html-rspack-plugin/lib/loader.js!./node_modules/.pnpm/@rsbuild+core@0.4.8_webpack@5.90.3/
  │ node_modules/@rsbuild/core/static/template.html (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsbuild+core@0.4.8_webpack@5.90.3/node_modules/@rsbuild/core/static/
  │ template.html:5:7)
  │     at __webpack_require__ (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsbuild+core@0.4.8_webpack@5.90.3/node_modules/@rsbuild/core/static/template.html:28:30)
  │     at /Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsbuild+core@0.4.8_webpack@5.90.3/node_modules/@rsbuild/core/static/template.html:69:27
  │     at /Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/@rsbuild+core@0.4.8_webpack@5.90.3/node_modules/@rsbuild/core/static/template.html:71:3
  │     at Script.runInContext (node:vm:133:12)
  │     at HtmlWebpackPlugin.evaluateCompilationResult (/Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/html-rspack-plugin@5.6.1_@rspack+core@0.5.5_webpack@5.90.3/node_modules/html-
  │ rspack-plugin/index.js:519:28)
  │     at /Users/liyin/Workspace/practise/rsbuild-vue2/node_modules/.pnpm/html-rspack-plugin@5.6.1_@rspack+core@0.5.5_webpack@5.90.3/node_modules/html-rspack-plugin/index.js:1105:23
  │     at async Promise.all (index 2)
  │     at async Promise.all (index 1)

info    Rsdoctor analyze server running on: http://192.168.50.29:6654/index.html
info    Rsdoctor analyze server running on: http://localhost:6654/index.html

I wondered if it was a vue2 issue, then I created a vue3 project via pnpm create rsbuild@latest, then installed rsdoctor via the above steps and ran it, and the error was exactly the same as above.

Reproduce link

none

Reproduce Steps

  1. pnpm create rsbuild@latest
  2. cd rsbuild-vue2
  3. pnpm i
  4. pnpm add @rsdoctor/rspack-plugin -D
  5. vim .env (add RSDOCTOR=true)
  6. npm run dev
liyincode commented 7 months ago

node version: v20.11.0

coderwyd commented 7 months ago

I also encountered the same problem, node version is 18.19.1

easy1090 commented 7 months ago

@liyincode This bug has been fixed. I'll publish today. But rsdoctor's loader analysis not support vue-loader, other analysis functions can support. You can config rsdoctor plugin like following to close loader analysis: https://rsdoctor.dev/config/options/options#features

features: ["bundle", "plugins"]
easy1090 commented 7 months ago

You can use v0.1.4, but the loader analysis in the vue project is turned off by default, and you can pay attention to this issue #20 https://rsdoctor.dev/guide/start/quick-start#vue-framework

OskarLebuda commented 1 month ago

@easy1090 why rsdoctor cannot analysis vue-loader? What is the problem?

easy1090 commented 1 month ago

@easy1090 why rsdoctor cannot analysis vue-loader? What is the problem?

@OskarLebuda The analysis of the loader by rsdoctor adds a proxy loader, which wraps the real original loader. The vue-loader makes some reference modifications in the vue loader pitch to allow Vue files to also go through loaders for other file extensions to ensure compatibility with SFC. However, this part is currently not supported by the rsdoctor proxy loader, and there will be errors. But recently, work is being done to make rsdoctor compatible with vue-loader, so you can check on that.：#467