Importing Local TS Package

caleb-at-pieces commented 11 months ago

To start, I'm not sure if this is the place for this issue, I am open to recreating this issue in another repository if it's more applicable.

Description

I am trying to import a local package into my jupyterlab extension project such as:

in package.json

"dependencies": {
  "local_package": "path/to/local/package"
}

The local package that I am using is just a bunch of typescript, there is no built js file, not even a package.json. This works fine while using npm in other environments, however I begin to run into issues while using jlpm (which I'm pretty sure uses yarn under the hood?)

So I ended up simply creating a package.json in the package I am trying to install, with index.ts as the entry point, this is where I'm not sure what to do next.

The package imports correctly, but when I try to build the extension with jlpm run build it is saying that the modules are not found.

Command Line Output

ModuleNotFoundError: Module not found: Error: Can't resolve './runtime' in '/Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi'
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/Compilation.js:2022:28
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:817:13
    at eval (eval at create (/Users/calebanderson/Documents/plugin_jupyter/node_modules/tapable/lib/HookCodeFactory.js:33:10), :10:1)
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:275:22
    at eval (eval at create (/Users/calebanderson/Documents/plugin_jupyter/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:448:22
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:689:25
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:893:8
    at /Users/calebanderson/Documents/plugin_jupyter/node_modules/webpack/lib/NormalModuleFactory.js:1013:5
resolve './runtime' in '/Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi'
  using description file: /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/package.json (relative path: ./runtime)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/runtime doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/runtime.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/runtime.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/runtime.wasm doesn't exist
      as directory
        /Users/calebanderson/Documents/plugin_jupyter/node_modules/connector_openapi/runtime doesn't exist
/Users/calebanderson/Documents/plugin_jupyter/node_modules/@jupyterlab/builder/lib/build-labextension.js:104
            throw new Error(err.details);

I see that jupyter is trying to resolve the file with different extensions, however the file is a typescript file, not js, wasm, or any of the ones it is looking for. I am not really sure what to do to resolve this next, this kind of strategy has worked for me in other projects however it's clear that this is not compatible with the jupyter build process.

Any help or workarounds for this would be much appreciated, this is definitely a pretty big blocker for my next development sprint.

Reproduce

create a local npm project with an 'index.ts' entry point
create another file in the project called 'runtime.ts's
import a function from 'runtime.ts' into 'index.ts'
add this local npm project to your jupyterlab extension's dependencies in package.json
try to build the jupyterlab extension

Expected behavior

I would expect this to be able to be built fine, as it has worked for me in other environments such as creating a vscode extension.

welcome[bot] commented 11 months ago

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. welcome You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

caleb-at-pieces commented 11 months ago

I figured out a fix for this utilizing tsconfig:

{
  "compilerOptions": {
    "paths": [
      "package_name": "path/to/package"
    ]
  },
  "include": ["project/src", "path/to/package"]
}

So basically typescript can handle all the packaging, although it would be nice to have this as a feature in the jupyterlab build process to make it more closely resemble default bundler behaviors exhibited by webpack and esbuild.

jupyterlab / extension-examples