Issue creating extension with bundlers -- no provider for other extensions

JupyterLab extensions
,
1

Description

I am trying to create a jupyterlab extension using svelte and a bundler. I am currently using webpack, but was using rollup earlier and having similar issues.

I am unable to use the requires input to the extension because of the following error. I am currently bundling the app into an amd bundle but have had the same issue with amd or cjs bundles. I get a different issue with iife bundles. I’m very new to these different bundle types so have tried several with no luck. :sweat_smile: Is the bundle format causing this issue / any idea on what is going on?

This same code was successfully creating a widget when I was not using a bundler (without the svelte part), so I assume it is an issue with the bundling.

Error message

Error: No provider for: @jupyterlab/notebook:INotebookTracker.

Expected behavior

The jupyterlab extension is successfully activated and creates a tab on the side bar that shows a small component.

Relevant files

See this repo for a full reproduction of this error.

App.svelte is a really simple hello world

<script lang="ts">
	export let name = "World";

	console.log("In Svelte app!!!!!!")
</script>

<main>
	<h1> Svelte thingie that says Hi {name}</h1>
</main>

<style>
	main {
		/* text-align: center; */
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}
</style>

index.ts:

import type {
  JupyterFrontEnd,
  JupyterFrontEndPlugin,
} from '@jupyterlab/application';
import { INotebookTracker } from '@jupyterlab/notebook';
import { Widget } from '@lumino/widgets';

import App from './components/App.svelte';


const extension: JupyterFrontEndPlugin<void> = {
  id: 'AutoProfileWidget:plugin',
  autoStart: true,
  activate: (
    app: JupyterFrontEnd,
    notebookTracker: INotebookTracker
  ) => {

    console.log("Activating AutoProfile extension...")

    const myView = new Widget(); 
    myView.id = "auto-profile-app"
    myView.title.iconClass = 'jp-SideBar-tabIcon myIcon';
    myView.title.caption = 'Autoprofile title caption';

    app.shell.add(myView, 'left', { rank: 600 }); // rank controls the order of the side panels I think, bottom puts at the bottom

    new App({
      target: myView.node,
      props: {
        name: "Test name"
      }
    });

    console.log("myView: ", myView)

  },
  requires: [INotebookTracker],
};

export default extension;

webpack.config.js:

const path = require('path');
// const version = require('./package.json').version;
const SveltePreprocess = require('svelte-preprocess');

// Custom webpack rules
const rules = [
  { test: /\.ts$/, loader: 'ts-loader' },
  { test: /\.js$/, loader: 'source-map-loader' },
  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  {
    test: /\.svelte$/,
    loader: 'svelte-loader',
    options: {
      preprocess: SveltePreprocess(),
    }
  },
  {
    test: /\.svg$/, loader: 'svg-url-loader'
  },
];

// Packages that shouldn't be bundled but loaded at runtime
const externals = []; //['@jupyter-widgets/base'];

const resolve = {
  // Add '.ts' and '.tsx' as resolvable extensions.
  extensions: [".webpack.js", ".web.js", ".ts", ".js", ".svelte"],
  mainFields: ['svelte', 'browser', 'module', 'main']
};

module.exports = [
  /**
   * Lab extension
   *
   * This builds the lib/ folder with the JupyterLab extension.
   */
  {
    entry: './src/index.ts',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'lib'),
      libraryTarget: 'amd',
      publicPath: '',
    },
    module: {
      rules: rules
    },
    externals,
    resolve,
  },

];
2

Was able to figure this out, is actually a simple fix. S/o to @trungleduc on the jupyterlab gitter for the help and for sharing this example repo that uses webpack CoSApp / CoSApp Lab · GitLab

The fix is to add some packages to the externals of webpack config so that they are loaded at runtime rather than bundled

In webpack.config.js

const externals = ['@jupyter-widgets/base',
  '@jupyterlab/notebook',
  '@lumino/widgets'];

and in package.json

 "jupyterlab": {
    "extension": true,
    "outputDir": "AutoProfileJupCookie/labextension",
    "sharedPackages": {
      "@jupyter-widgets/base": {
        "bundled": false,
        "singleton": true
      },
      "@jupyterlab/notebook": {
        "bundled": false,
        "singleton": true
      },
      "@lumino/widgets": {
        "bundled": false,
        "singleton": true
      }
    }
  }
3

Here is the extension I am building that uses webpack to build the svelte files into an extension for jupyter lab, hopefully will be helpful for others that come across this