Pyodide

As Jupyter React ships with the in-browser Python kernel Pyodide, packaging your code is not trivial.

We recommend using Webpack as bundler for your project. Then you will need to add the following rules to support in-browser kernels:

  "module": {
    "rules": [
      /*
       ... the rules for the JavaScript and CSS assets
      */
      // Rule for the JupyterLite service worker.
      // !important this must result in a file named `service-worker.js`
      // to be served at the root of your website.
      {
        resourceQuery: /text/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]',
        },
      },
      // Rule for pyodide kernel
      {
        test: /pypi\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'pypi/[name][ext][query]',
        },
      },
      {
        test: /pyodide-kernel-extension\/schema\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'schema/[name][ext][query]',
        },
      }
    ]
  }