Forge tunnel can't find local linked npm package

Forge Forge Platform and Tools
, , ,
#1

Hi,
I have npm package I want to import across multiple places (e.g. my custom UI and forge UI builds) that I keep in a separate directory and have configured via npm link as a local package. When I do a regular deploy, everything works fine, however when I configure a tunnel to a custom UI endpoint the bundling fails with TS2307: Cannot find module 'mypackage' or its corresponding type declarations. on a file in the src dir of my forge app.

are there issues with local npm packages when tunneling?

1 Like
#2

Hi Michael,

I’m getting in contact with the relevant team to understand why your situation works when deployed but not in the tunnel.

#3

So I had a chat with them. Problem relates to docker not picking up symlinks correctly.
A workaround is to use yalc which will perform a copy of your files into node_modules instead.

Let me know if this doesn’t work for you.

2 Likes
#4

@JoshuaHwang so when looking at GitHub - wclr/yalc: Work with yarn/npm packages locally like a boss. i can see we would need the following:

in the shared library:
yalc publish --private

in the location where we want to used the shared source code:
yalc add xxx

When doing this, I can indeed see the package and the source code in the node_modules directory.
In webstorm I can find the packages and import.

Now if I do this, I still get an error:
Error: Bundling failed: Module not found: Error: Can’t resolve …

Thanks.

#5

Hi Tim

The error your facing is quite different to the original poster’s. Would you be able to provide the full error message to help investigations?

Cheers.

#6

Hi @JoshuaHwang ,

originally I had the same problem when using npm link:
TS2307: Cannot find module 'mypackage' or its corresponding type declarations.

Then I installed yalc:

npm i yalc -g

Then installed the local shared library using

yalc publish --private

Then into the macro where I would like to use the shared library, I installed it using:

yalc add shared

Then when running forge deploy I get no error message and have a working macro.

When using forge tunnel, I do get another error:
Error: Bundling failed: Module not found: Error: Can’t resolve ‘xxx’ in ‘/app/src’, Module not found: Error: Can’t resolve ‘yyy’ in ‘/app
/src’, Module not found: Error: Can’t resolve ‘zzz’ in ‘/app/src’

I do see the package and source code installed in the node_modules directory.

Thanks in advance.

#7

Hey Tim!

I’ve tried reproducing this locally however following the same steps I haven’t been able to reproduce the error. Could you please provide some more information such as;

  • @forge/cli version
  • npm version
  • yalc version

I wonder if it might have something to do with the complexity of your local shared library such as file structure, bundling requirements or how exports are being resolved with yalc. At this point I have little reason to suspect any of this, just a thought.

Here are the steps that I followed to try and reproduce which worked okay for me, I’d be curious to know if they also work for you?

On my machine:

  • @forge/cli version = 4.5.1
  • npm version = 8.11.0
  • yalc version = 1.0.0-pre.53
  1. Create a new package with npm init
  2. Export a single simple function from the package
export function giveMeFive() {
    return 5;
}
  1. Run yalc publish --private
  2. Create a test confluence-macro forge app
  3. Deploy, install and test with deployed default app code and tunnelled default app code
  4. Run yalc add <local package name> in the forge app directory
  5. Update forge app to import and render the result of a giveMeFive function call
  6. Re-deploy the forge app
  7. Test newly deployed app & test tunnelled app which both resolve and render correctly

Looking forward to hearing from you.

#8

Hi @MatthewFreeman ,

First of all, sorry for the late reply but was holiday.

I performed the steps you outlined in your post and they were matching what I did before but I get the same result in a sense.

When literally performing the steps, then it works, the giveMeFive works as expected.

BUT the moment I add some Atlassian UI/API calls in there I get the same error message as I had before:

Error: Bundling failed: Module parse failed: Unexpected token (18:51)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import api, { route } from "@forge/api";
| > export const getConfluenceLabels = async (contentId: string) => {
|     const res = await api
|       .asApp(), Module parse failed: Unexpected token (26:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| // FUNCTIONS
> export const getContentProperty = async (contentId: string, key: string) => {
|     const res = await api
|         .asApp(), Module parse failed: Unexpected token (18:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import api, { route } from "@forge/api";
| > export const getJiraIssue = async (issueIdOrKey: string) => {
|   const res = await api
|     .asApp()

So this seems to be related to any dependencies in the shared code through yalc.

Kind regards,

Tim