Skip to content

Svelte for VSCode: preprocessor: preserve: ["ld+json"] in config doesn't fix red squiggles in component script #1427

@jthistle

Description

@jthistle

Describe the bug
When attempting to include <script type="application/ld+json"> in <svelte:head>, red underlines appear in the component <script>, even though Svelte compiles the application without complaints and the configuration is correctly set up.

Before I added the preserve option to the configuration, I was also getting the same red squiggles, but Svelte was also complaining and would not compile the file, so the squiggles were expected.

To Reproduce
Minimal example:

svelte.config.js:

// svelte.config.js:
const sveltePreprocess = require('svelte-preprocess');

function createPreprocessors(sourceMap) {
    return sveltePreprocess({
        sourceMap,
        preserve: ["ld+json"],
    });
}

module.exports = {
    preprocess: createPreprocessors(true),
    createPreprocessors
};

rollup.config.js:

// ...
const { createPreprocessors } = require('./svelte.config');

export default {
	// ...
	plugins: [
		svelte({
			preprocess: createPreprocessors(true),
			// ...
		}),
		// ...
	],
	// ...
}

Component.svelte:

<script>
    const schema = {
        key: "value",
        // ^ red squiggles appear here
    };
</script>

<svelte:head>
    {@html `<script type="application/ld+json">${JSON.stringify(schema)}</script>`} <!-- *** -->
</svelte:head>

Note that commenting out the line marked with <!-- *** --> fixes the problem.

Expected behavior
No red squiggles appear, everything is fine in the eyes of the language server.

System (please complete the following information):

  • OS: Ubuntu 20.04 LTS
  • IDE: VSCode
  • Plugin/Package: Svelte for VSCode

Metadata

Metadata

Assignees

No one assigned

    Labels

    FixedFixed in master branch. Pending production release.bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions