devtools icon indicating copy to clipboard operation
devtools copied to clipboard

Missing setup data

Open MichaelHeydon opened this issue 5 months ago • 0 comments

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
        ...
    ],
});

Our older Vue apps that use the Options API continue to display all info as expected. Is there anything we can check to debug further? Or is this a known issue?

MichaelHeydon avatar Jul 04 '25 03:07 MichaelHeydon