Any example using "npm link" to a module in another local repo

1

Hi.
I’m trying to make a simple rescript react app that uses components defined in another folder.
I tryed “npm link” but got a “module or file … can’t be found”
Is there any documentation about it or some examples?
Thanks

1 Like
4

I use npm link (or yarn link) a lot to test different projects. Here’s how it works:

In project-a:

  • run npm link

In project-b:

  • run npm link project-a
  • add project-a to dependencies in bsconfig.json
  • run npx bsb -make-world

And everything should work as expected after that.

The only catch is that you can’t have the compiler running in both projects at the same time AFAIK. If you run bsb in project-a, then you’ll need to run bsb -make-world in project-b to rebuild it.

1 Like
5

I can’t get it to work.
I’ve made a minimal example, could someone try it out?
https://mega.nz/folder/BJQCDDoK#UjR0SXRRLfwdn3N7ln-h6g
prety sure I’m missing something obvious as always :-\

6

I suspect your project has been assigned a module namespace.

In your bsconfig.json file the name is project-b so your namespace should be ProjectB

So you should be able to access your component using that:

@react.component
let make = () => {
  <ProjectB.OtherComp />
}

Does that work?

7

I can confirm that the namespacing is what’s causing the issue in your example. Once I resolved that, it built fine

// project-a/src/Layout.res
-  <OtherComp/>
+  <ProjectB.OtherComp/>

Alternatively, you can set namespace to false in project-b.

Here are my terminal steps. [...] denotes where I trimmed the output.

$ cd project-b
$ npm link
[...]
/[...]/.fnm/node-versions/v14.15.0/installation/lib/node_modules/project-b -> /[...]/rescript link projects issue/project-b
$ cd ../project-a
$ npm install
[...]
$ npm link project-b
/[...]/rescript link projects issue/project-a/node_modules/project-b -> /[...]/.fnm/node-versions/v14.15.0/installation/lib/node_modules/project-b -> /[...]/rescript link projects issue/project-b
$ npx bsb -make-world
Duplicated package: reason-react /[...]/rescript link projects issue/project-a/node_modules/reason-react (chosen) vs /[...]/rescript link projects issue/project-a/node_modules/project-b/node_modules/reason-react in /[...]/rescript link projects issue/project-a/node_modules/project-b
Dependency on reason-react
bsb: [56/56] src/legacy/ReactDOMRe.cmj
bsb: [71/71] install.stamp
Dependency on project-b
Duplicated package: bs-platform /[...]/rescript link projects issue/project-a/node_modules/bs-platform (chosen) vs /[...]/rescript link projects issue/project-a/node_modules/project-b/node_modules/bs-platform in /[...]/rescript link projects issue/project-a/node_modules/project-b
Duplicated package: reason-react /[...]/rescript link projects issue/project-a/node_modules/reason-react (chosen) vs /[...]/rescript link projects issue/project-a/node_modules/project-b/node_modules/reason-react in /[...]/rescript link projects issue/project-a/node_modules/project-b
bsb: [4/4] src/OtherComp-ProjectB.cmj
bsb: [8/8] install.stamp
Dependency Finished
bsb: [7/7] src/App-ProjectA.cmj

The “Duplicated package” warnings shouldn’t be a problem right now since bsb is choosing the correct package in both cases, but you can resolve them by moving bs-platform and reason-react to peerDependencies in project-b so they aren’t duplicated.

8

It worked here too!
Thanks John :slight_smile:

9

You’re welcome!

Note that the namespace and “duplicate package” issues aren’t specific to npm link. They would exist exactly the same if the package was installed with npm install. From the compiler’s perspective, there’s no difference between a linked and an installed package.

10

Just one more thing…
Would having a custom whatcher calling bsb, using “-clean-world” only on the first call, be similar to the real bsb watcher?

11

You can run bsb -clean-world -make-world -w which will clean, then build, then enter watch mode in that order. Is that what you want to do?

12

I was refering to have the linked model also watched.
You can’t have bsb whatching them both rigth? …now I hope so cause I just made a custom watcher :stuck_out_tongue:
If I have both projects watched the main one doesn’t build anymore.
I manage to have a custom watcher the searches bs-dependencies also and calls bsb again without the cleaning. It’s working great :slight_smile:

13

If someone wants to reuse the code… https://mega.nz/folder/YQIyWDQL#SV56Ly_wzNYd4xRbzKB0IQ
It also bundles for the browser using esbuild but has a few hardcoded stuff you need to clean

1 Like