Should tslib be a production dependency?

[mtorp]

Describe the bug

When I try to import VSCodeButton (import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';), I'm getting the following error:

    Cannot find module 'tslib' from '../../node_modules/.pnpm/@vscode+webview-ui-toolkit@1.2.1_react@18.2.0/node_modules/@vscode/webview-ui-toolkit/dist/button/index.js'

    Require stack:
..../node_modules/.pnpm/@vscode+webview-ui-toolkit@1.2.1_react@18.2.0/node_modules/@vscode/webview-ui-toolkit/dist/button/index.js
..../node_modules/.pnpm/@vscode+webview-ui-toolkit@1.2.1_react@18.2.0/node_modules/@vscode/webview-ui-toolkit/dist/custom-elements.js
..../node_modules/.pnpm/@vscode+webview-ui-toolkit@1.2.1_react@18.2.0/node_modules/@vscode/webview-ui-toolkit/dist/index.js
..../node_modules/.pnpm/@vscode+webview-ui-toolkit@1.2.1_react@18.2.0/node_modules/@vscode/webview-ui-toolkit/react/index.js
...........

In ./dist/button/index.js there is an import of tslib (import { __decorate } from "tslib";), but tslib is defined as dev dependency of vscode-webview-ui-toolkit.

To reproduce

Run the import as above

Desktop (please complete the following information):

• OS Version: macOS 13.1
• Toolkit Version: 1.2.1

I'm using pnpm version 7.5.2

[hawkticehurst]

Hey @mtorp thanks for the bug report!

Could you create and share a small reproduction of this bug? I've tried to reproduce it, but have been unable to do so at this point.

[mtorp]

Hi @hawkticehurst,

I've haven't been able to reproduce the issue. I'm not sure what the problem was but it suddenly disappeared after I reran pnpm install.

Sorry for reporting the issue before investigating it further.

[hawkticehurst]

@mtorp no worries at all! Thanks for the update :)

[FlorentHoareau]

Hello, I am facing the same issue in release 1.2.2 (also happening with 1.2.1)

See the first import in dist/button/index.js:

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { __decorate } from "tslib";
import { attr } from '@microsoft/fast-element';
import { Button as FoundationButton, buttonTemplate as template, } from '@microsoft/fast-foundation';
import { buttonStyles as styles } from './button.styles.js';

Visible at
https://www.npmjs.com/package/@vscode/webview-ui-toolkit/v/1.2.2?activeTab=explore

I am also getting the same issue with @microsoft/fast-web-utilities not being listed as a dependency but used in dist/radio-group/index.js.

NB: I'm using yarn pnp

[hawkticehurst]

Hey @FlorentHoareau, thanks for following up!

Could you try to give specific steps to reproduce this issue? I have continued to be unable to reproduce this on my end.

Also based on @mtorp's experience, perhaps you might want to try reinstalling your dependencies. Maybe even delete node_modules (and/or your lock file) and then reinstall as well.

[FlorentHoareau]

Hi @hawkticehurst

Sure, you can reproduce it with these steps (I'm using node 18.x but I guess any would do):

corepack enable
corepack prepare yarn@stable --activate
yarn dlx create-react-app --template typescript vscode-webview-ui-tooklit-tslib-issue
cd vscode-webview-ui-tooklit-tslib-issue
rm src/App.test.tsx
yarn add @vscode/webview-ui-toolkit

Replace src/App.tsx with:

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

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

export default App;

and then yarn start should fail with these errors:

Module not found: Error: Can't resolve 'tslib' in '/home/florent/vscode-webview-ui-tooklit-tslib-issue/.yarn/__virtual__/@vscode-webview-ui-toolkit-virtual-8baf9fd80e/0/cache/@vscode-webview-ui-toolkit-npm-1.2.2-243130d45d-fd41c59310.zip/node_modules/@vscode/webview-ui-toolkit/dist/button'
ERROR in ./.yarn/__virtual__/@vscode-webview-ui-toolkit-virtual-8baf9fd80e/0/cache/@vscode-webview-ui-toolkit-npm-1.2.2-243130d45d-fd41c59310.zip/node_modules/@vscode/webview-ui-toolkit/dist/button/index.js 3:0-35
Module not found: Error: Can't resolve 'tslib' in '/home/florent/vscode-webview-ui-tooklit-tslib-issue/.yarn/__virtual__/@vscode-webview-ui-toolkit-virtual-8baf9fd80e/0/cache/@vscode-webview-ui-toolkit-npm-1.2.2-243130d45d-fd41c59310.zip/node_modules/@vscode/webview-ui-toolkit/dist/button'

ERROR in ./.yarn/__virtual__/@vscode-webview-ui-toolkit-virtual-8baf9fd80e/0/cache/@vscode-webview-ui-toolkit-npm-1.2.2-243130d45d-fd41c59310.zip/node_modules/@vscode/webview-ui-toolkit/dist/radio-group/index.js 3:0-85
Module not found: Error: Can't resolve '@microsoft/fast-web-utilities' in '/home/florent/vscode-webview-ui-tooklit-tslib-issue/.yarn/__virtual__/@vscode-webview-ui-toolkit-virtual-8baf9fd80e/0/cache/@vscode-webview-ui-toolkit-npm-1.2.2-243130d45d-fd41c59310.zip/node_modules/@vscode/webview-ui-toolkit/dist/radio-group'

As a bonus you also get the issue with the missing "@microsoft/fast-web-utilities" that I listed in my previous message.

NB: with this template, you also get an error from eslint, but it's not related.

Hope this helps.

[FlorentHoareau]

I'm currently solving this issue by adding a .yarnrc.yml in project root to override the dependencies of this package:

Add in .yarnrc.yml:

packageExtensions:
  "@vscode/webview-ui-toolkit@*":
    dependencies:
      "@microsoft/fast-web-utilities": ^6.0.0
      tslib: ^2.1.0

And then run

yarn
yarn start

And it will work without errors.

[hawkticehurst]

Thank you so much, this does help!

I'm following the steps now and ran into an issue when trying to run:

yarn dlx create-react-app --template typescript vscode-webview-ui-tooklit-tslib-issue

The error reported:

yarn run v1.22.19
error Couldn't find a package.json file in "/some/folder/path/on/my/computer"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Did you run into this at all and/or have any thoughts on why that might be showing up? A bit confused because yarn dlx is basically the same as npx right? I would assume it shouldn't matter that I don't have a package.json in the directory where I'm running this command

[FlorentHoareau]

Which version of yarn are you using ? (looks like it's 1.22.19 ?) You need at least v2.
If you run corepack prepare yarn@stable --activate you should get yarn -v returning 3.5.1 (as of today)

[FlorentHoareau]

And yes basically yarn dlx is the same as npx (so no package.json required) but it will use yarn's cache and resolution methods instead of npm.

[hawkticehurst]

Nice, the wrong version of yarn was the issue. Thank you for the catch!

I was able to reproduce the issue, so I'm happy to reopen this and put it on the list of things to fix.

As some general expectation setting, however, I've been mentioning to everyone that the toolkit is really tightly resourced at this time (myself and one other person split our time between this project and a handful of others), so it might take longer than usual to tackle this.

With that said, I'm hopeful that switching tslib from a dev dep to a primary dep won't have many (or any) secondary consequences, and thus not too much work to resolve.