rails / importmap-rails

Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
MIT License
1.07k stars 119 forks source link

Couldn't find any packages in ["package name"] on jspm/unpkg/jsdelivr #116

Closed brunoprietog closed 2 years ago

brunoprietog commented 2 years ago

Hi,

I am getting the error noted in the title. It happens with any package and any provider. It happened to me today and from what I saw on a Stackoverflow question someone else has had it happen since yesterday. I tried it on several projects and the same thing happens.

What could be happening?

Thanks!

f0086 commented 2 years ago

Can confirm that. Code did not changed, so I assume that https://api.jspm.io/ changed their API-endpoint or encounter some issues currently.

davideitel commented 2 years ago

+1 noticing the same issue. However, I found a few packages that do work, but most that I've tried are broken. Working: jquery, js-cookie, bootsrap Broken: react, ember, vue, mathjax, slick-carousel, etc.

f0086 commented 2 years ago

Looks like the problem solved itself. This issue can be closed.

nickhammond commented 2 years ago

This looks to be an issue when a library doesn't have a main entry point defined or index.js file, which is more common with the CSS focused libraries.

bin/importmap pin bootstrap-icons
Couldn't find any packages in ["bootstrap-icons"] on jspm

Looking at the request being made:

curl --request POST \
  --url https://api.jspm.io/generate \
  --header 'Content-Type: application/json' \
  --data '{
    "install": [
        "bootstrap-icons"
    ],
    "flattenScope": true,
    "env": [
        "browser",
        "module",
        "production"
    ],
    "provider": "jspm"
}'

it's returning a 401 with the following response body:

{
  "error": "Error: No '.' exports subpath defined in https://ga.jspm.io/npm:bootstrap-icons@1.8.1/ resolving bootstrap-icons imported from about:blank/."
}

With something like bootstrap-icons it's just a matter of referencing it from a CDN as a regular stylesheet or including it in some other way with your styles.

rajanverma-me commented 2 years ago

@nickhammond I don't think its entry point is the only issue.. Puppeteer is also not loading which can be loaded directly on jspm generator .. but not with importmap command ./bin/importmap pin puppeteer It says, Couldn't find any packages in ["puppeteer"] on jspm

lhguerra commented 2 years ago

I can also confirm the issue for limax library. Also, I don't get why this issue has been closed since the problem persists.

phylor commented 2 years ago

As a workaround it seems you can pin them on your own in config/importmap.rb:

  1. Put your npm package name into the jspm generator
  2. Get the URL below the imports key (starting with https://ga.jspm.io)
  3. Add pin "<package name>", to: "<url>" to config/importmap.rb

Hard to use importmaps like that in a real-world productive app though.

megane42 commented 1 year ago

For those who has been running into this problem, using --from unpkg or --from jsdelivr may solve this issue.

bin/importmap pin <package name> --from unpkg

I have no idea for pros and cons of using unpkg or jsdelivr rather than jspm, but at least it works well.

BenCh94 commented 1 year ago

@algolia/autocomplete-js seems to be broken across jpsm/jsdelvr/unpkg, this worked in one of our apps about a week ago but is broken now when trying to install in another app. Sounds like the issue could be caused by something on the CDN side??

Other packages are pinning without issues.

Is there an option to provide a full url to the impotmap command?

The package is on jsdelivr here: https://www.jsdelivr.com/package/npm/@algolia/autocomplete-js

javierav commented 1 year ago

This is still an unresolved issue @dhh

 $ bin/importmap pin bootstrap
Couldn't find any packages in ["bootstrap"] on jspm
BenCh94 commented 1 year ago

Seems to work ok on the JSPM generator web interface: https://generator.jspm.io

But the API call: curl --request POST --url https://api.jspm.io/generate --header 'Content-Type: application/json' --data '{"install": ["@algolia/autocomplete-js"],"flattenScope": true,"env": ["browser","module","production"],"provider": "jsdelivr"}'

Returns: {"error":"Error: Module not found: https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@1.8.3/dist/esm/autocomplete imported from https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@1.8.3/dist/esm/index.js"}

So the issue seems to be on the JSPM API, would be helpful if the command returned some of the error info from JSPM instead of package not found.

dhh commented 1 year ago

cc @guybedford

guybedford commented 1 year ago

If setting provider: 'jspm', that would have thrown a "no provider is defined" error since we renamed this provider to jspm.io. We fixed up the backwards compatibility here, and I've just redeployed the API with a fix - so I believe this should be fixed now. Just let me know if you have any further issues with the API at all.

guybedford commented 1 year ago

@BenCh94 for the algolia case, the file on JS delivr is https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@1.8.3/dist/esm/index.js which doesn't use file extensions in it imports, therefore is browser incompatible.

The JSPM.IO provider does fix issues like these in its compat and optimization, so it should work there.

BenCh94 commented 1 year ago

Yeah got it working with JPSM, thanks for the quick fix @guybedford

ScotterC commented 1 year ago

Odd, I'm still having this issue on 1.1.6.

bin/importmap pin @segment/analytics-next@1.51.7 --from unpkg
Couldn't find any packages in ["@segment/analytics-next@1.51.7"] on unpkg

bin/importmap pin @segment/analytics-next@1.51.7 --from jsdelivr
Couldn't find any packages in ["@segment/analytics-next@1.51.7"] on jsdelivr

These packages are up on the CDN here

ChillerDragon commented 10 months ago

I am currently trying to get this one to work

./bin/importmap pin monaco-editor
Couldn't find any packages in ["monaco-editor"] on jspm

Interestingly I managed to trigger an error message for my missing package. I wonder who's responsibility it is to fix these issues. If there is an issue with the package it sounds like the package maintainers should fix it. But it would also be nice if stuff that works via for example npm also works via importmap.

jspm

curl --request POST   --url https://api.jspm.io/generate   --header 'Content-Type: application/json'   --data '{
        "install": [
                "monaco-editor"
        ],
        "flattenScope": true,
        "env": [
                "browser",
                "module",
                "production"
        ],
        "provider": "jspm"
}'
{"error":"Error: \n  \tfont-display: block;\n> \tsrc: url(./codicon.ttf) format(\"truetype\");\n                                              ^\n  }\n\nError parsing https://ga.jspm.io/npm:monaco-editor@0.45.0/esm/vs/base/browser/ui/codicons/codicon/codicon.css:9:45"}

So it seems to fail on this line src: url(./codicon.ttf) format("truetype"); in the following file:

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

@font-face {
    font-family: "codicon";
    font-display: block;
    src: url(./codicon.ttf) format("truetype");
}

.codicon[class*='codicon-'] {
    font: normal normal normal 16px/1 codicon;
    display: inline-block;
    text-decoration: none;
    text-rendering: auto;
    text-align: center;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    -webkit-user-select: none;
}

/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */

jsdelivr

curl --request POST   --url https://api.jspm.io/generate   --header 'Content-Type: application/json'   --data '{
        "install": [
                "monaco-editor"
        ],
        "flattenScope": true,
        "env": [
                "browser",
                "module",
                "production"
        ],
        "provider": "jsdelivr"
}'
{"error":"Error: Module not found: https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/esm/vs/basic-languages/monaco.contribution imported from https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/esm/vs/editor/editor.main.js"}

That error at least makes sense to me. It lists a file that can not be found in here:

https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/esm/vs/editor/editor.main.js

import '../basic-languages/monaco.contribution';
import '../language/css/monaco.contribution';
import '../language/html/monaco.contribution';
import '../language/json/monaco.contribution';
import '../language/typescript/monaco.contribution';

export * from './edcore.main';

And this is 404 -> https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/esm/vs/basic-languages/monaco.contribution

This one exists tho https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/esm/vs/basic-languages/monaco.contribution.js

Not the missing .js at the end. This seems to be an issue with either jsdelivr not appending a .js or monaco-editor not appending .js. Im not a javascript pro not sure who to blame but one of them should fix it ._.

unpkg

curl --request POST   --url https://api.jspm.io/generate   --header 'Content-Type: application/json'   --data '{
        "install": [
                "monaco-editor"
        ],
        "flattenScope": true,
        "env": [
                "browser",
                "module",
                "production"
        ],
        "provider": "unpkg"
}'
{"error":"FetchError: request to https://unpkg.com/monaco-editor@0.45.0/esm/vs/basic-languages/mdx/mdx.contribution.js failed, reason: Socket timeout"}

I tried 3 times and it keept saying timeout. Which is weird because I could open the url just fine. https://unpkg.com/monaco-editor@0.45.0/esm/vs/basic-languages/mdx/mdx.contribution.js

(update: it seems unpkg is not stable at the moment. It fails on a different file everytime and I could also reproduce some timeouts on my end now)

dhh commented 10 months ago

Packages with asset dependencies like this won't work with import maps automatically. Checkout jsbundling-rails if you must have that.