importmap json does not include a package in package.json

[phanhaiquang]

Hi,

I am using "face-api.js" package (https://github.com/justadudewhohacks/face-api.js).

When I use "./bin/importmap pin face-api.js", there are packages added to config/importmap.rb and I have a problem with tslib because it does not provide default export. It seems that this is common issue with ES6 tslib.

So that I want to use package.json to manage this lib.
yarn add face-api.js

Then, I "pin" this inside config/importmap.rb
pin 'face-api.js'

Add it to application.js
import "face-api.js";

And, use it in my js component
import * as faceapi from "face-api.js";

After restart rails server, i got this error
---- error on my browser's console ----
Uncaught TypeError: Failed to resolve module specifier "face-api.js". Relative references must start with either "/", "./", or "../".

Rails server reports some more warning in console
---- rails server ----
Rendered logins/index.html.erb within layouts/application (Duration: 7.4ms | Allocations: 2177)
Importmap skipped missing path: face-api.js.js

I tried to change "face-api.js" to "face-api", but it does not work.

Using "importmap json" does not show this package in my import map

I am not sure what is missing. Could you please give a support ?

Thanks,

[dhh]

Importmap is an alternative to yarn, not an addition to it. You use it instead of it.

bin/importmap pin face-api

[guybedford]

@phanhaiquang if you try clearing your browser cache the default export issue should be resolved now. Unfortunately @tensorflowjs/core doesn't currently seem to be working with another error - I've create a JSPM project issue to track this in jspm/project#134, you can watch that issue further.

[phanhaiquang]

@phanhaiquang if you try clearing your browser cache the default export issue should be resolved now. Unfortunately @tensorflowjs/core doesn't currently seem to be working with another error - I've create a JSPM project issue to track this in jspm/project#134, you can watch that issue further.

Thank @guybedford . I clear cache and the error disappeared. But it faces another error as you mention. :(

[phanhaiquang]

@dhh I saw your YouTube and you mention that we could also use importmap & yarn together. It is the way you added "trix" to package.json, and pin it in config/importmap.rb.

I tried to do the same by adding the lib to package.json and pin it in config file. But I am not sure what is still missing. Do you mean that I could not pin a package inside node_modules ? And if I need to use the lib, I need to download the lib and put to "vendor" folder ?

[dhh]

Those are two separate paths. It's either import map, and then you lean on the asset pipeline, where "trix" is made available by the Action Text gem, or you use JS bundling, and then we recommend jsbundling-rails.

[phanhaiquang]

Thanks a lot @dhh for prompt response !

[adas172002]

Importmap is an alternative to yarn, not an addition to it. You use it instead of it.

bin/importmap pin face-api

Hello,

Replaying to @dhh's statement, what about using yarn to download js package, but not including with sprockets JS assets pipeline command javascript_include_tag "query"? Instead, pinning with something like pin "query", to "node_modules/jquery/dist/jquery.js"

I am struggling to take this path, but without success.

BTW. When using —download option jquery.js is stored in vendor/javascript/, however importmap-rails docs implies app/javascript/vendor/. Which is correct? And how should I reference js packages downloaded with yarn to node_modules? Will package.json files will be used so I can skip [package]/dist/package.js path?

[dhh]

The whole point of this importmap-rails setup is to avoid needing node as part of development or deployment. If you're already fine with using node, you can use jsbundling-rails instead. I don't think it makes sense to mix yarn with importmap-rails.

vendor/javascript is correct. If we missed a spot, do open a PR with an update 🙏

[phanhaiquang]

Regarding to this particular package (face-api.js library), I could make it work by jsbulding and esbuild. But I really likes importmap so that I tried and could make it works finally.

The reason that I could not "pin" to ES6 is that the package has an issue with ES6 as an earlier comment in this loop.

Below are my steps

1. I setup a new empty node project
2. Use "yarn" to install the package
3. Copy entire package folder under node_modules to app/javascript/vendor
4. Pin this in config/importmap.rb
   pin "face-api.js/dist/face-api.js", to: "vendor/face-api.js"
5. import the package

At the time when I did these steps, I tried "importmap pin" with --download and it does not work (--download was just supported in today release) so that I need to download manually. With latest importmap-rails version with --download, I think we can replace steps 1-4 by a single step.

I also get trouble with "import" command. "import * as faceapi from ..." does not work. I need to use "import "vendor/face-api.js/dist/face-api.js"".

[dhh]

Are you sure that face-api.js doesn't work via bin/importmap? Have you tried bin/importmap pin face-api.js? Seems like it's resolving fine via jspm.io (which is the backend for bin/importmap).

[phanhaiquang]

I used ES6 for that "importmap pin" and it has error. Googling shows that the error is not completely resolved (another error happens after i clean my cached)

At that time, I did not try to change the provider from ES6 to JSPM (actually, I did not know that I can change. Because I did not read your readme carefull).

[adas172002]

The whole point of this importmap-rails setup is to avoid needing node as part of development or deployment. If you're already fine with using node, you can use jsbundling-rails instead. I don't think it makes sense to mix yarn with importmap-rails.

Thanks for this tip. I want to dive more into importmap-rails as it will become a new standard for RoR. So I selected a simple project with a lot of JS sprinkles and slowly move it to Stimuls + Turbo tandem, using importmap-rails. My intention was to keep yarn only for JS packages management (yarn add, yarn remove) and use importmaps pointing to code inside package dist folders. Totally agree to ditching node.js etc.

Learning a lot, thanks for your support. I was impressed by quick response to my 1st note.

vendor/javascript is correct. If we missed a spot, do open a PR with an update 🙏

I prepared a pull request for this point. Please bear with me as this is my first commit to a public project on GitHub 😉

[guybedford]

@phanhaiquang I managed to get the face-api case working on JSPM in jspm/project#134 (see the last sandbox link there). If you have any further issues with it feel free to follow up there.

[loqimean]

No, for my bad it just returns Couldn't find any packages in ["face-api.js"] on jspm

Are you sure that face-api.js doesn't work via bin/importmap? Have you tried bin/importmap pin face-api.js? Seems like it's resolving fine via jspm.io (which is the backend for bin/importmap).