Not ready for SSR (NextJS)

[softmarshmallow]

Trying to use this package on NextJS Proj.
Having difficulties with the itegrations.

Steps to reproduce

npx create-next-app --typescript demo
cd demo
yarn add @vscode/webview-ui-toolkit

Usage with @vscode/webview-ui-toolkit/react
in index.tsx

import React from "react"
import { VSCodeButton } from  "@vscode/webview-ui-toolkit/react";

export default function Page(){
    return (<>
        <VSCodeButton>click me</VSCodeButton>
    </>);
}

will throw

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Nor the usage with @vscode/webview-ui-toolkit

import React from "react"
import "@vscode/webview-ui-toolkit";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "vscode-progress-ring": any;
    }
  }
}


export default function Page(){
    return (<>
       <vscode-progress-ring></vscode-progress-ring>
    </>);
}

This will throw SSR error - window is not defined

Will this package be ready to be used as plug-and-play in the near future ?

Ref

• Issues using React components in test environment #409
• How to configure with React? (TS) (NextJS) #296

[hawkticehurst]

Hey @softmarshmallow, yeah this makes sense.

Web components do not support the ability to do SSR at this time (and notably the React components we ship are just web components under the hood wrapped in a React component).

Here's a resource that discusses some workarounds to this reality and may be helpful: https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/

But in general, SSR support is something that is considered out of scope for this project since we're building the toolkit for VS Code extension development (where source code gets compiled together and later installed by a user), so SSR is an architecture that doesn't really apply/make sense for this context.