Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing Local TS Package #257

Open
caleb-at-pieces opened this issue Oct 30, 2023 · 2 comments
Open

Importing Local TS Package #257

caleb-at-pieces opened this issue Oct 30, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@caleb-at-pieces
Copy link

caleb-at-pieces commented Oct 30, 2023

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

  1. create a local npm project with an 'index.ts' entry point
  2. create another file in the project called 'runtime.ts's
  3. import a function from 'runtime.ts' into 'index.ts'
  4. add this local npm project to your jupyterlab extension's dependencies in package.json
  5. 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.

@caleb-at-pieces caleb-at-pieces added the bug Something isn't working label Oct 30, 2023
@welcome
Copy link

welcome bot commented Oct 30, 2023

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

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! 👋

Welcome to the Jupyter community! 🎉

@caleb-at-pieces
Copy link
Author

caleb-at-pieces commented Oct 31, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant