Hello World React Vite CSP console error

[agiron123]

Describe the bug

When running the Hello World React Vite sample, I am getting the following CSP error:

index.js:87 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://*.vscode-cdn.net". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

qg @ index.js:87

To reproduce

Follow the instructions as mentioned in the Hello World React Vite Readme

Pasted below for convenience:

# Copy sample extension locally
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-vite hello-world

# Navigate into sample directory
cd hello-world

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

Now launch the extension.

CMD + P: > Hello World React + Vite Show

Open the developer tools:

CMD + P: > Developer: Toggle Developer Tools

Check console for an error related to CSP.

Expected behavior

No error message should appear in the developer console.

Screenshots

Desktop (please complete the following information):

• OS Version: 14.2.1 Sonoma
• Toolkit Version: how do i find this? happy to provide but i'm unsure how to get this information.

Additional context

This should be reproducible just from the sample repository. I'm not really sure if this is an error coming from the hello world extension itself, or somewhere else.

I'm happy to answer more questions and provide more context as needed.

[dotNomad]

Did some digging into this and it seems to be related to provideVSCodeDesignSystem().register(vsCodeButton()); without registering the button this doesn't occur.

Comparing it to the react example the imports are different.

Even the default hello world has this issue: https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/default/hello-world

[hawkticehurst]

Hi @agiron123!

I'm very sorry to say that the toolkit is being deprecated and all development on these samples has come to a close.

There was an announcement a few days ago on the main toolkit repo where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!