Yarn + Typescript + React build issue

[davclark]

Describe the bug

This came up in discussion in #5215. It's a strange bug which can go unnoticed during development.

Basically, jupyter labextension install will fail on at least some packages using typescript and react because it always uses yarn. Yarn has a known issue with resolving types for react and react-dom.

This bug means that a straight attempt to install a package with a naive approach to setting up typescript and React (and by naive, I mean expecting things to work across npm and yarn). See example below.

To Reproduce

I'm simply pointing you to a simple version of the gigantum extension, as I think it's quite clear to see what's going on. If an even simpler demo project is desired, please ask!

Assuming a throw-away python env with jupyterlab installed, set up for extension development:

git clone https://github.com/gigantum/jupyterlab-gigantum-extension.git
cd jupyterlab-gigantum-extension
git checkout db9761876b2797adf7163cbf47b535357c5d62c7
jupyter labextension install .

You will see scads of (redundant) type errors.

Expected behavior

It builds with npm (which is the recommended development command in the docs), so it should install without error. Incompatibilities between yarn and npm will likely continue to perpetuate this problem.

Knowing that I need to accomodate yarn, I can follow the instructions provided on the DefinitelyTyped issue and include the following in my package.json (at least for @types/react-dom 16.0.11):

  "resolutions": {                                                              
    "@types/react": "16.4.13"                                                   
  },

This is how the jupyterlab-gigantum-extension package is now configured, so that it builds.

Potential fixes include switching to npm, or at least suggesting developers use yarn so that they hit the same issues that users will hit. I assume that yarn devs proximity to the flow devs may cause continued lag in typescript support - so I'd LIKE to be able to just use npm. (I'm unaware of any remaining categorical benefits of npm at this point - I'm interested to hear if there are principled reasons to use it.)

Desktop (please complete the following information):

OS / Browser not relevant, but running in npm 8 or 10 works (tested on Ubuntu 18.04 and macOS), while yarn fails (testing only on Ubuntu).

• JupyterLab 0.35.4

Troubleshoot Output

$PATH:
	/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/bin
	/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/bin
	/home/dav/gopath
	/home/dav/gopath/bin
	/home/dav/.local/bin
	/usr/local/sbin
	/usr/local/bin
	/usr/sbin
	/usr/bin
	/sbin
	/bin
	/usr/games
	/usr/local/games
	/snap/bin
sys.path:

/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/bin

/usr/lib/python36.zip

/usr/lib/python3.6

/usr/lib/python3.6/lib-dynload

/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/lib/python3.6/site-packages
sys.executable:

/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/bin/python3
sys.version:

3.6.7 (default, Oct 22 2018, 11:32:17)

[GCC 8.2.0]
platform.platform():

Linux-4.15.0-39-generic-x86_64-with-Ubuntu-18.04-bionic
which -a jupyter:

/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/bin/jupyter

/home/dav/Projects/tmp/jupyterlab-gigantum-extension/env/bin/jupyter

/home/dav/.local/bin/jupyter
pip list:

backcall (0.1.0)

bleach (3.0.2)

decorator (4.3.0)

defusedxml (0.5.0)

entrypoints (0.2.3)

ipykernel (5.1.0)

ipython (7.2.0)

ipython-genutils (0.2.0)

jedi (0.13.1)

Jinja2 (2.10)

jsonschema (2.6.0)

jupyter-client (5.2.3)

jupyter-core (4.4.0)

jupyterlab (0.35.4)

jupyterlab-server (0.2.0)

MarkupSafe (1.1.0)

mistune (0.8.4)

nbconvert (5.4.0)

nbformat (4.4.0)

notebook (5.7.2)

pandocfilters (1.4.2)

parso (0.3.1)

pexpect (4.6.0)

pickleshare (0.7.5)

pip (9.0.1)

pkg-resources (0.0.0)

prometheus-client (0.5.0)

prompt-toolkit (2.0.7)

ptyprocess (0.6.0)

Pygments (2.3.0)

python-dateutil (2.7.5)

pyzmq (17.1.2)

Send2Trash (1.5.0)

setuptools (39.0.1)

six (1.11.0)

terminado (0.8.1)

testpath (0.4.2)

tornado (5.1.1)

traitlets (4.3.2)

wcwidth (0.1.7)

webencodings (0.5.1)

I believe other outputs are irrelevant, but will provide if asked!

[davclark]

Oh, and see also: yarnpkg/yarn#4489

The Yarn devs seem to have a principled reason not to want to fix this.

[davclark]

One last thing - to make it explicit, I'm happy to help with a PR for a doc change on this. I'm also happy to TRY to help if you want to change to npm from yarn, but I suspect I may not be the most effective / efficient person at doing that!

[quigleyj97]

Is there any particular reason why you have @types packages in your dependencies? They’re helpers for TS only, so they should normally be devDependencies (meaning they won’t get installed by end users installing your extension)

[davclark]

Thanks @quigleyj97 - this was simply outside the scope of what I was focused on. I've moved @types to devDependencies now.

UPDATE: ...and this means I don't need the resolutions clause anymore. I'm a bit mystified as to how this fixes the issue, but I'm willing to let it go for now.

Closing, but feel free to re-open.