Skip to content

Missing setup data #921

Open
Open
@MichaelHeydon

Description

@MichaelHeydon

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions