JupyterLab Extension Tutorial: Error when creating new widgets using @lumino/widgets and @jupyterlab/apputils

Question

I am following the JupyterLab Extension Tutorial and came across the following error when trying to create new widgets. The related codes:

import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
import { Widget } from '@lumino/widgets';

and

 const newWidget = () => {
      // Create a blank content widget inside of a MainAreaWidget
      const content = new Widget();
      const widget = new MainAreaWidget({ content });
      widget.id = 'apod-jupyterlab';
      widget.title.label = 'Astronomy Picture';
      widget.title.closable = true;
      return widget;
    }
    let widget = newWidget();

and the error:

(property) MainAreaWidget<T extends Widget = Widget>.IOptions<Widget>.content: Widget
The child widget to wrap.

Type 'import("/Users/my_name/Desktop/Research/JupyterLab/jupyterlab_apod/node_modules/@lumino/widgets/types/widget").Widget' is not assignable to type 'import("/Users/my_name/Desktop/Research/JupyterLab/jupyterlab_apod/node_modules/@jupyterlab/apputils/node_modules/@lumino/widgets/types/widget").Widget'.
  Types of property 'title' are incompatible.
    Property 'iconRenderer' is missing in type 'import("/Users/my_name/Desktop/Research/JupyterLab/jupyterlab_apod/node_modules/@lumino/widgets/types/title").Title<import("/Users/my_name/Desktop/Research/JupyterLab/jupyterlab_apod/node_modules/@lumino/widgets/types/widget").Widget>' but required in type 'import("/Users/my_name/Desktop/Research/JupyterLab/jupyterlab_apod/node_modules/@jupyterlab/apputils/node_modules/@lumino/widgets/types/title").Title<import("/Users/my_name/Desktop/Research/JupyterLab/jupyterlab_apod/node_modules/@jupyterlab/apputils/node_modules/@lumino/widgets/types/widget").Widget>'.ts(2322)
title.d.ts(100, 5): 'iconRenderer' is declared here.
mainareawidget.d.ts(100, 9): The expected type comes from property 'content' which is declared here on type 'IOptions<Widget>'
No quick fixes available

Dependencies:

  "dependencies": {
    "@jupyterlab/application": "^3.6.3",
    "@jupyterlab/apputils": "^3.6.3",
    "@lumino/widgets": "^2.1.0"
  },

I am just closely following the tutorial and the code are copy and pasted. I am able to see the right console log in the previous step so I think I have generally got the right environments and installed the packages. I wonder why this error happens and how I can solve them. Thank you so much for any suggestions.

Answer 1

This is likely due to the conflict in lumino versions. Doing the following steps work for me:

The error you're encountering is due to a conflict between different versions of the @lumino/widgets package. The error message indicates that the Widget type being imported from '@lumino/widgets' is not assignable to the Widget type being used by '@jupyterlab/apputils'. This is likely because the @jupyterlab/apputils package has a different version of the @lumino/widgets package as a dependency, which causes conflicts in the types.

To fix this issue, you can try to resolve the dependency conflict by aligning the versions of @lumino/widgets in your project. To do this, follow these steps:

1. Open your package.json file and find the version of @lumino/widgets specified in the dependencies section. If it is not present, you can add it. Update the version of @lumino/widgets to match the version used by @jupyterlab/apputils.

2. To find the version used by @jupyterlab/apputils, you can look inside the node_modules/@jupyterlab/apputils/package.json file and check the dependencies section for the required @lumino/widgets version.

3. Save the package.json file and run npm install or yarn install to update the dependencies.