Skip to content

[Bug]: Vue - Missing setup data in vue-dev-tools #10887

Open
@MichaelHeydon

Description

@MichaelHeydon

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1270P
    Memory: 9.47 GB / 30.59 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.18.2 - ~/.nvm/versions/node/v20.18.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.2/bin/npm
  Browsers:
    Brave Browser: 137.1.79.126
    Chrome: 137.0.7151.119
  npmPackages:
    @rspack/cli: ~1.4.1 => 1.4.1 
    @rspack/core: ~1.4.1 => 1.4.1 

Details

While looking to migrate to rspack from webpack we are encountering an issue with vue-dev-tools. With webpack/vue-dev-tools when inspecting a Vue SFC that uses <script setup lang="ts"> we can see all data within setup:
Image

With rspack it becomes:
Image

Vue related config within rspack.common.js:

{
    test: /\.vue$/,
    loader: "vue-loader", // to handle .vue files
    options: {
        appendTsSuffixTo: [/\.vue$/],
        compilerOptions: {
            isCustomElement: (tag) => tag.startsWith("sbx-"), // allow sbx- tags in vue templates, which is our custom element prefix
            whitespace: "preserve",
        },
        // Note, for the majority of features to be available, make sure this option is `true`
        experimentalInlineMatchResource: true,
    },
},

And rspack.dev.js:


const { merge } = require("webpack-merge");
const common = require("./rspack.common.js");
const { VueLoaderPlugin } = require("vue-loader"); // https://www.npmjs.com/package/vue-loader
...

module.exports = merge(common, {
    mode: "development",
    devtool: "eval-source-map", // Add source maps for easier debugging
    plugins: [
        new VueLoaderPlugin(), // to handle .vue files
        ...
    ],
});

Reproduce link

No response

Reproduce Steps

  1. npm run build

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions