JupyterLab Extension SourceMap for Typescript

JupyterLab
1

I am writing a JupyterLab Extension using Typescript. I want to generate sourcemap and serve the source code during debug mode. Is there a recommended way to do this? Can it be done via configuring the package.json to add the source to output?

What does setting --source-map True in the packaage.json do? Doesn’t seem to work for me.

“build:labextension:dev”: “jupyter labextension build --development True --source-map True .”,

2

This should indeed produce the source maps for the extension and make it possible to debug the extension in the browser dev tools.

To generate the source maps for the core @jupyterlab packages, you might have to run the following command too (once should be enough):

jupyter lab build --minimize=False
3

Thanks for the response. You are right that does generate the sourcemap. However here is what I want to achieve.

  1. Write the extension in typescript. If I turn on sourceMap in tsconfig then I get the .js.map file in the lib folder when tsc runs. This sourceMap is for the Typescript source.

  2. However when webpack does its work to build the labextension it generates another sourceMap for the Javascript that the tsc creates. The final sourceMap is only for the generated Javascript. Is there a way to have the webpack/jlpm bundle the typescript sourcemap instead of the sourcemap for the generated Javascript?

I hope that makes sense. Thanks!

4

I am closer to figuring it out. In the package.json file, I can specify “webpackConfig” in “jupyterlab”. And jlpm does build the labextension however how should the output definition be so that Jupyterlab can load it properly? Currently I use the following for my webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'smtest/labextension'),
    },
};

However it looks like Jupyterlab is expecting lib_index_js..js remoteEntry..js? What should the output be so that I can use a custom webpack.config.js?

5

Alright, finally figured it out. I need to use both a custom webpack.config.js and source-map-loader | webpack to pass along the sourcemap generated by tsc into the final bundle that jlpm builds.

1 Like
6

Thanks for tracking this down! Would you mind sharing your final configuration?

It seems that, given how prevalent typescript is, we might want to add ts-loader as a native configuration option for prebuilt extensions.

7

could you share you configs?

8

The current cookiecutter now does this, without ts-loader:

9

in my case this config worked

rules: [
      // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /\.([cm]?ts|tsx)$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              experimentalWatchApi: true,
              configFile: 'tsconfig.json'
            }
          }
        ],
        include: [__dirname + '/src'],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
        exclude: /node_modules/
      }
    ],