jupyterlab-chart-editor build issues

[dmt0]

Part 1:

jupyter labextension install jupyterlab-chart-editor

> node /Users/user/miniconda2/envs/jlab2/lib/python3.7/site-packages/jupyterlab/staging/yarn.js run build:dev:minimize
yarn run v1.21.1
$ jlpm run build:dev
$ jlpm run build
$ webpack
ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react-chart-editor/lib'
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/webpack/lib/Compilation.js:925:10
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/neo-async/async.js:2830:7
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/neo-async/async.js:6877:13
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/forEachBail.js:30:14
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
resolve 'react/jsx-runtime' in '/Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react-chart-editor/lib'
  Parsed request is a module
  using description file: /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react-chart-editor/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react-chart-editor/lib/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react-chart-editor/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/jlab2/share/jupyter/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/jlab2/share/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/jlab2/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/envs/node_modules doesn't exist or is not a directory
      /Users/user/miniconda2/node_modules doesn't exist or is not a directory
      /Users/user/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules
        using description file: /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/package.json (relative path: ./jsx-runtime)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/jsx-runtime doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/jsx-runtime.wasm doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/jsx-runtime.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/jsx-runtime.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/jsx-runtime.json doesn't exist
            as directory
              /Users/user/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react/jsx-runtime doesn't exist
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
JupyterLab failed to build
Traceback (most recent call last):
  File "/Users/user/miniconda2/envs/jlab2/lib/python3.7/site-packages/jupyterlab/debuglog.py", line 47, in debug_logging
    yield
  File "/Users/user/miniconda2/envs/jlab2/lib/python3.7/site-packages/jupyterlab/labextensions.py", line 105, in start
    command=command, app_options=app_options)
  File "/Users/user/miniconda2/envs/jlab2/lib/python3.7/site-packages/jupyterlab/commands.py", line 460, in build
    command=command, clean_staging=clean_staging)
  File "/Users/user/miniconda2/envs/jlab2/lib/python3.7/site-packages/jupyterlab/commands.py", line 661, in build
    raise RuntimeError(msg)
RuntimeError: JupyterLab failed to build
Exiting application: jupyter

jupyterlab-chart-editor needs to be compatible with v2

Part 2:

  Parsed request is a module
  using description file: /Users/nicolas/miniconda2/envs/jlab2/share/jupyter/lab/staging/node_modules/react-chart-editor/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

cc @nicolaskruchten

[nicolaskruchten]

Thanks! Note that "part 2" is contained within "part 1" ... in the middle.

[jasongrout]

Possibly related: JupyterLab 3 switched to react 17.

[jasongrout]

Searching the react 17 announcement for "react/jsx-runtime" yields some insights, including:

The functions inside react/jsx-runtime and react/jsx-dev-runtime must only be used by the compiler transform. If you need to manually create elements in your code, you should keep using React.createElement. It will continue to work and is not going away.

[nicolaskruchten]

Thanks for taking a look @jasongrout! Yeah @dmt0 you may need to monkey around inside RCE here to make it friendlier for the JupyterLab build system.

FYI @dmt0 even though JupyterLab 3 switched to React 17, I still want jupyterlab-chart-editor to work with JupyterLab 2 as well for as long as possible, so if we can stay conservative with the fancy React upgrades that would be helpful :)