Skip to content

[Feature]: Native Vue 2 support without VueLoaderPlugin dependency #727

@DenisHdz

Description

@DenisHdz

What problem does this feature solve?

When using Rstest with Vue 2 projects, the @rsbuild/plugin-vue2 plugin fails with a RuleSetCompiler error. This happens because VueLoaderPlugin (from vue-loader v15) uses Webpack's RuleSetCompiler internally, which is incompatible with Rspack's rule format when running inside Rstest.

This affects a significant portion of the Vue ecosystem that hasn't migrated to Vue 3 yet.

Error Message

Compiling RuleSet failed: Properties with are unknown (at clonedRuleSet-30: [object Object])
at RuleSetCompiler.error (node_modules/.../webpack/lib/rules/RuleSetCompiler.js:435:10)
at VueLoaderPlugin.apply (node_modules/.../vue-loader/lib/plugin-webpack5.js:68:18)
at createCompiler (node_modules/@rsbuild/core/node_modules/@rspack/core/dist/index.js)

Root Cause

  1. VueLoaderPlugin imports Webpack's RuleSetCompiler to clone and modify bundler rules
  2. Rstest uses Rsbuild internally, which creates rules with Rspack-specific properties
  3. When VueLoaderPlugin.apply() runs, it tries to process Rspack rules with Webpack's compiler
  4. Webpack's RuleSetCompiler doesn't recognize some Rspack-specific rule properties → Error

What We Tried

Approach Result
@rsbuild/plugin-vue2 ❌ VueLoaderPlugin fails with RuleSetCompiler error
Manual vue-loader config via tools.rspack ❌ Same VueLoaderPlugin error
@rspack/loader-vue2 (Rspack-native) ❌ Same VueLoaderPlugin error
Loader without VueLoaderPlugin ❌ Loader requires the plugin to function

Environment

  • Rstest version: 0.6.8
  • @rsbuild/core: 1.6.0-beta.1
  • @rsbuild/plugin-vue2: 1.0.4
  • vue-loader: 15.11.1
  • Vue: 2.7.14

Reproduction

  1. Create a Vue 2 project with .vue SFC files
  2. Configure Rstest with @rsbuild/plugin-vue2
  3. Run rstest
  4. Observe RuleSetCompiler error

When using rspack build directly with vue-loader + VueLoaderPlugin it works with the custom configuration without having to use the vue2 plugin.

What does the proposed API look like?

Option 1: Built-in Vue 2 Support

Rstest could provide native Vue 2 SFC handling without relying on VueLoaderPlugin:

// rstest.config.ts
import { defineConfig } from '@rstest/core'

export default defineConfig({
// Built-in Vue 2 support that doesn't require VueLoaderPlugin
framework: 'vue2',
// or
plugins: [rstestPluginVue2()]
})

Option 2: Fix VueLoaderPlugin Compatibility

Ensure that rules passed to plugins are in a format that Webpack's RuleSetCompiler can understand, or provide a compatibility layer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions