there is no mapping for this bare specifier

[mediabuff]

I get the following error:

`file:///C:/MyDevProjects/MySandbox/webc-lit-rcl-pkg/web-lit-rcl/wwwroot/motion-slide.js:10:24
9 | import { classMap } from 'lit/directives/class-map.js';

10 | import { animate } from '@lit-labs/motion';
| ^
11 | import style from './motion-slide.lit.js';
--- reason ---
there is no mapping for this bare specifier`

Source: File (works perfectly with bundler)
import { LitElement, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { animate } from '@lit-labs/motion'; import style from './motion-slide.lit.js';

[dmail]

Hello, I just tried to create a project from scratch with the following files (and it works fine):

project/
  index.js
  generate_importmap.mjs
  package.json

index.js

import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { animate } from "@lit-labs/motion";

generate_importmap.mjs:

import { writeImportMapFiles } from "@jsenv/importmap-node-module";

await writeImportMapFiles({
  projectDirectoryUrl: new URL("./", import.meta.url),
  importMapFiles: {
    "./project.importmap": {
      mappingsForNodeResolution: true,
      entryPointsToCheck: ["./index.js"],
    },
  },
});

package.json:

{
  "name": "toto",
  "type": "module",
  "dependencies": {
    "@lit-labs/motion": "^1.0.3"
  }
}

> node ./generate_importmap.mjs

-> /Users/d.maillard/dev/jsenv/importmap-node-module/tests/toto/project.importmap

[mediabuff]

Thank you. Let me follow your template and try again

[mediabuff]

hi, I have couple questions.

1. How do you work with typescript source files. All my *.ts compiled to wwwroot subdirectory. Now I am point to wwwroot/index.js

2. Fails on dynamic imports

SyntaxError: C:\MyDevProjects\MySandbox\SkateboardVideoPlatform\WebComponents\Skate.UI.Webc\http:\jsenv.com\wwwroot\main-layout-css-tester.js: Support for the experimental syntax 'importAssertions' isn't currently enabled (16:3):

14 | const cssModule = await import('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap', {
15 | assert: { type: 'css' }

16 | });
| ^
17 | // Dynamic Import 2. This Does'nt Work! Althought @import will not work in spite of some web blogs. See warning in console.
18 | // WICG/construct-stylesheets#119 (comment)
19 | // https://dev.to/overrideveloper/a-first-look-at-constructable-stylesheets-3ae

Add @babel/plugin-syntax-import-assertions (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-assertions) to the 'plugins' section of your Babel config to enable parsing.

[dmail]

All my *.ts compiled to wwwroot subdirectory. Now I am point to wwwroot/index.js

Wonderful, this is the way to go

Fails on dynamic imports

🤔 I think it's because in your file structure you have something like that:

root/
  wwwroot/
    index.js
  index.ts
  babel.config.js

And when generating importmap you pass projectDirectoryUrl: new URL("./wwwroot/", import.meta.url) right?
So when code will search for babel config file it will not find it (There is no babel config file inside the wwwroot directory).

The fix is likely to copy babel config file into the wwwroot directory.

[dmail]

And you need @babel/plugin-syntax-import-assertions in your babel config file

[dmail]

To improve things I'll publish a new version with the following changes:

• Enable import-assertions syntax by default because I believe they are going to be standard and part of babel defaults at some point
• Allow to pass an url to the babel config file so that you don't have to copy the babel config file when generating importmap for build files

[mediabuff]

fyi, I don't direclty use babel. I don't use any bundler, just plain Typescript.

my package.json
{
"dependencies": {
"@lit-labs/motion": "latest",
"lit": "latest"
},
"devDependencies": {
"@jsenv/importmap-node-module": "^5.2.1"
}
}

my browser import map -->
<script type="importmap">
{
"imports": {
"lit": "https://esm.run/lit",
"lit/decorators.js": "https://esm.run/lit/decorators.js",
"lit/directives/class-map.js": "https://esm.run/lit/directives/class-map.js",
"lit/directives/ref.js": "https://esm.run/lit/directives/ref.js",
"@@lit-labs/motion": "https://esm.run/@@lit-labs/motion"
}
}
</script>

[mediabuff]

I have changed package.json and did an update -
"@jsenv/importmap-node-module": "latest"

New error:
Import resolution failed for "lit"
--- import trace ---
file:///C:/MyDevProjects/MySandbox/SkateboardVideoPlatform/WebComponents/Skate.UI.Webc/wwwroot/skate-main-layout.js:8:26
7 | var SkateMainLayout_1;

8 | import { html, css } from 'lit';
| ^
9 | import { customElement, property } from 'lit/decorators.js';
--- reason ---
there is no mapping for this bare specifier

[dmail]

I'll try your setup and see what is going on

[dmail]

Ok I just tried lit + typescript and got something working. The files involved are here:
https://github.com/jsenv/importmap-node-module/tree/master/experiment/lit_typescript

You end up with Import resolution failed for "lit" because the importmap script did not generate a mapping for "lit". I bet that is because your root package.json have no name. In that case this tool logs a warning in the console and exits without generating import mappings, see #62.

Hot fix is to add a name to your root package.json.
I am going to publish a new version soon that will allow the root package to be anonymous