SyntaxError: Unexpected token 'export' on NextJS (ts)

[softmarshmallow]

https://github.com/gridaco/designto-code/tree/add-vscode-ui
gridaco/code@3dde26d

commenting out the import statement - import "@vscode/webview-ui-toolkit" did the compile, but the element won't show up

[hawkticehurst]

Ahh yeah, so there's a couple of things going on here that I think are causing the issues you're seeing.

Named imports

First, when importing the toolkit library using ES6 import syntax, import "@vscode/webview-ui-toolkit" is actually incorrect and you instead need to import the individual named component functions you want to use. So for example, the following would be correct:

import {vsCodeProgressRing} from "@vscode/webview-ui-toolkit";

Wrap components when using React

The second important part of this story is that since you're using Next/React you'll need to do a little bit more work to get the components to work since React cannot currently render web components by default. Instead, we need to wrap the web components and then use that in your JSX markdown.

The FAST team (FAST being the technology that the toolkit is built on top of) has actually created a utility package called fast-react-wrapper which allows us to wrap FAST web components so they are usable in React.

A basic example of how this all works goes as follows:

Install the fast-react-wrapper package:

npm install --save @microsoft/fast-react-wrapper

Note: There is currently a known issue where fast-react-wrapper can only be installed if you're using React v16. So if for example, you're using React v17 you'll have to temporarily downgrade your react and react-dom packages. This is being addressed by the FAST team and should hopefully be resolved soon.

Inside the component file (for example, App.jsx or App.tsx) where you want to use the toolkit component you'll need to add the following imports and statements:

import React from "react";
import { provideReactWrapper } from "@microsoft/fast-react-wrapper";
import { provideVSCodeDesignSystem, vsCodeProgressRing } from "@vscode/webview-ui-toolkit";

const { wrap } = provideReactWrapper(React, provideVSCodeDesignSystem());
const VSCodeProgressRing = wrap(vsCodeProgressRing());

function App() {
  return (
      <VSCodeProgressRing></VSCodeProgressRing>
  );
}

export default App;

This should get you to a working/properly rendered progress ring.

Some other notes

This is only the briefest of introductions to the topic of using the toolkit with React and below are some links to other docs/discussions on the topic.

• FAST: React Integration Docs
• Toolkit issue that has a very helpful discussion about using React + Toolkit

I will also note that this week and next week I'm currently working on dedicated React + Toolkit documentation and a sample extension that clearly lays out everything someone would need to know in order to get the toolkit properly working in a React-based extension.

Up to this point, we've had no documentation on how to use the toolkit with React, so you along with many others have been (understandably) running into the same issues and hopefully, that will be fixed with the release of these docs.

Hope this all helps get you unblocked in the short term and feel free to ask any follow-up questions!

[hawkticehurst]

@softmarshmallow just checking in again, did this resolve your issue?

[hawkticehurst]

@softmarshmallow checking in once more, is it okay to close this issue, or are there outlying problems that still need to be resolved that should be put on our backlog?

[softmarshmallow]

Oh. Sorry for the rate reply. Sure. I'll add a new comment or open a new issue if something new comes out. :)

[hawkticehurst]

No worries at all! Thanks for the reply regardless!

I'll go ahead and close this issue and yes please do create new issues if run into any other trouble in the future. 🙂