Importing files from another extension in my extension code

JupyterLab
,
1

I am trying to use a token(ITourHandler) from another extension(jupyterlab-tour) in my extension code to provide custom tour functionality, but I am not able to import the interface ITourHandler from the extension. Since jupyterlab-tour is not distributed as an npm package, how do I import the classes from that extension so that I can pass them as tokens in my code?

2

It’s on npm:

And the token is exported:

You do need to ensure that your extension:

  • in package.json
    • adds jupyterlab-tour to
      • #/dependencies
      • #/jupyterlab/sharedPackages
        "jupyterlab-tour": {
  "bundled": false,
  "singleton": true
}
  • in pyproject.toml/setup.cfg/setup.py
    • adds jupyterlab_tour to install_requires

For your sanity, you’ll probably want to have at least a reasonable bottom pin, e.g. >=3.1.4, but potentially a top pin as well, e.g <4.

3

I added jupyterlab-tour to my package.json and my pyproject.toml, but I am still getting an error on

const tour = (await app.commands.execute('jupyterlab-tour:add', {
  tour: { // Tour must be of type ITour - see src/tokens.ts
    id: 'test-jupyterlab-tour:welcome',
    label: 'Welcome Tour',
    hasHelpEntry: true,
    steps: [  // Step must be of type IStep - see src/tokens.ts
      {
        content:
          'The following tutorial will point out some of the main UI components within JupyterLab.',
        placement: 'center',
        target: '#jp-main-dock-panel',
        title: 'Welcome to Jupyter Lab!'
      },
      {
        content:
          'This is the main content area where notebooks and other content can be viewed and edited.',
        placement: 'left-end',
        target: '#jp-main-dock-panel',
        title: 'Main Content'
      }
    ],
    // can also define `options`
  }
})) as ITourHandler;

(code copied from README GitHub - jupyterlab-contrib/jupyterlab-tour: A JupyterLab UI tour built on jupyterlab-tutorial and react-joyride.)
The error is because of ITourHandler. I tried importing ITourHandler in my index.js with import { ITourHandler } from "jupyterlab-tour"; But I am still getting an error when I try to jlpm run build

message: 'Module parse failed: Unexpected token (49:10)\n' +
      'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
      '|           // can also define `options`\n' +
      '|         }\n' +
      '>       })) as ITourHandler;\n' +

I have tried using webpack for my project, but I am running into problems with it and would prefer not to use it. How should I successfully import ITourHandler?

4

did you add jupyterlab-tour as a dependency in package.json and re-run jlpm?

index.js

You will not need the as ITourHandler for a .js file, only for .ts… which i highly recommend.

I have tried using webpack for my project, but I am running into problems with it and would prefer not to use it

Your project will be using webpack: there is no avoiding it, at present, for labextensions.

Do you have a public link to your work (preferrably a PR)?

5

Yes I added jupyterlab-tour as a dependency and re-ran jlpm.

I tried removing as ITourHandler for index.js and my extension fails to load because Error: Command 'jupyterlab-tour:add' not registered.

I tried changing my files to .ts, and I keep getting syntax errors about needing a webpack loader even when I copy the way this jupyter tutorial does it.

My repo as a PR: Adding tour by grallewellyn · Pull Request #1 · MAAP-Project/maap-help-jupyter-extension · GitHub

Thank you!

6

Do you mean that the prebuilt extension system is using Webpack already or I need to create a custom webpack.config?
Here is another labextension my group has done without using a custom webpack config: GitHub - MAAP-Project/edsc-jupyter-extension

(sorry 2 posts, links limited for new users)

7

prebuilt extension system is using Webpack

yes.

custom webpack config:

right, you shouldn’t need custom webpack.

however, you’ll need to ensure your src/*.ts files get “transpiled” to lib/*.js (or wherever you’ve configued your stuff).

having a look at how GitHub - jupyterlab/extension-cookiecutter-ts: A cookiecutter recipe for JupyterLab extensions in Typescript works is probably the high road: if you’re doing new-start work, it absolutely pays to base if off that, which is pretty much the most up-to-date source of tribal knowledge.

8

yeah… you’ll probably only want to end up checking in the low-entropy files like package.json, src, etc… all the other stuff will make it very hard to follow over time. see the .gitignore on the cookiecutter for a good idea of what’s “important”.

9

I changed my project to transpile the files into lab/*.js, and changed the src/index.ts to contain the code snippet to add your own tour, but I am still getting this error

Error: Command 'jupyterlab-tour:add' not registered.
    at CommandRegistry.execute (index.es6.js:365:1)

My only import related to jupyterlab tour in src.index.ts is import { ITourHandler } from "jupyterlab-tour";

Also, just updated my .gitignore, thanks!

10

I am trying to replicate the sample code suggested for Mamba navigator, but it appears that code is still experiencing the same error Error: Command 'jupyterlab-tour:add' not registered.

Am I supposed to addCommand myself to use jupyterlab-tour?

11

have you pip install (or conda install)ed jupyterlab-tour? This will provide the actual labextension. It’s not really set up to be used entirely standalone.

12

That worked, thanks!! I tried that before and it was just giving me just the default jupyter lab tour, but I figured it out now. However, now I am running into a problem where the tour keeps showing up even after I select “Don’t show again” and after finishing the tour. I have my “force” parameter set to false. Do you have any suggestions for this? I could find a manual override for this, but I would prefer to fix it through jupyterlab-tour.