Generated import map fails for lit-html dependency

[diegosanchezp]

I was testing the generated import map to use a web component in the browser, it's made with lit-html. The import map seems to not list all of the dependencies. I get the following error:

es-module-shims.min.js:2 Uncaught (in promise) Error: Unable to resolve specifier 'lit-html/lib/shady-render.js' from http://localhost:8000/node_modules/lit-element/lit-element.js
    at es-module-shims.min.js:2
    at d (es-module-shims.min.js:2)
    at :8000/async http:/localhost:8000/es-module-shims.min.js:2
    at async Promise.all (:8000/index 0)
    at :8000/async http:/localhost:8000/es-module-shims.min.js:2

However if use a different import map like the following it works fine

{
  "imports": {
    "lit-element": "/node_modules/lit-element/lit-element.js",
    "lit-element/": "/node_modules/lit-element/",
    "lit-html": "/node_modules/lit-html/lit-html.js",
    "lit-html/": "/node_modules/lit-html/"
  }
}

Any ideas why it might be failing ?

I've created a repository so yo can reproduce the bugs if you have time

About My setup

• I'm using yarn to install the dependencies
• Using pollyfill es-module-shims
• The code to generate the import map can be found on generate-import-map.mjs
• Using node v14.5.0

To reproduce the bug

git clone https://github.com/diegosanchezp/import-maps-examples.git
cd import-maps-examples
git checkout failed-generators
yarn install

Generate the import map npm run generate-jsenv-map

Start the local server npm run server-jsenv

[dmail]

Hi, thank you for the detailed issue and repository to reproduce.

So you get only the main file remapping in the importmap generated by jsenv.

{
  "imports": {
    "lit-element": "/node_modules/lit-element/lit-element.js"
  }
}

But you need the main remapping + the directory remapping

{
  "imports": {
    "lit-element": "/node_modules/lit-element/lit-element.js",
    "lit-element/": "/node_modules/lit-element/"
  }
}

This is because the importmap generated by jsenv use exports when it is defined in package.json. Without it jsenv does not generate a remapping for node module internals.

Ideally lit-element would have the following in lit-element/package.json.

+  "exports": {
+    "./": "./"
+  }

Don't worry though you can get what you want using packagesManualOverrides: a not yet documented parameter of getImportMapFromNodeModules.

Add the following in generate-import-map.mjs

    packagesManualOverrides: {
      "lit-html": {
        exports: {
          "./": "./",
        },
      },
      "lit-element": {
        exports: {
          "./": "./",
        },
      },
    }

I have tried on my machine and you will have the importmap you need:

[diegosanchezp]

Hello! sorry for the late response.

Thanks for the detailed answer Sir. I see know, the problem is because the export key is not defined in the lit-html package.json.

Works as expected with that additional parameter.

Closing this issue.