deno.land/x can't resolve jsxImportSource

[yandeu]

In nano_jsx I would like to import the jsx-runtime like so:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://deno.land/x/nano_jsx"
  }
}

But on deno run, this failes to resolve error: Module not found "https://deno.land/x/nano_jsx/jsx-runtime". Even though there is an index.ts file inside that directory and it contains the jsx-runtime.

---

It would be nice if deno.land/x would be able to resolve index.js and index.ts files from inside a jsx-runtime directory.

[lucacasonato]

Just create a file named https://deno.land/x/nano_jsx/jsx-runtime. Deno should default extension-less files to .js

[yandeu]

What if the file jsx-runtime is written in typescript?

[lucacasonato]

You reexport the ts file from the js file.

[yandeu]

Is there a working example?

I don't know if it works on deno.land/x but loading it from github fails:

error: Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported.
  Specifier: https://raw.githubusercontent.com/nanojsx/nano/jsx-runtime-deno/deno_lib/jsx-runtime

Probably because the content-type is text/plain?

[yandeu]

Is this somehow solvable without the use of an import map?

[eibens]

@yandeu Did you come up with a workaround? I took a look at nano_jsx and it the recommended approach is via legacy JSX config (importing h and Fragment).

@lucacasonato It seems that a file called jsx-runtime is served with content-type: application/octet-stream from deno.land:

curl -I -X GET https://deno.land/x/ansiml@v0.0.6/jsx-runtime

HTTP/2 200 
accept-ranges: bytes
access-control-allow-origin: *
age: 72
x-frame-options: DENY
cache-control: public, max-age=31536000, immutable
content-length: 40
content-security-policy: default-src 'none'; style-src 'unsafe-inline'; sandbox
content-type: application/octet-stream
...

Local development is another issue. If you just import ./jsx-runtime (no extension) you also get this error.

error: Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported.

I currently start a local web-server that sets content-type: text/plain for jsx-runtime files and import it from there, but that is hardly a convenient solution. Any plans to allow importing extension-less modules, custom extensions, or making some sort of exception for jsx-runtime? Changing the header on deno.land/x might work too (not 100% sure if its the actual issue here), but then each module host has to consider that exception (e.g. GitHub), and local development would still need another workaround.

[yandeu]

On Node.js with the TypeScript compiler, it looks for an index file inside a jsx-runtime directory.

If you grap the nano-jsx npm package (npx -y gitget npm:nano-jsx) you will find a jsx-runtime directory in /esm and /lib.

---

I just tried using Deno with npm and it worked.

This does work: (https://github.com/nanojsx/nano-jsx-deno-example/tree/npm)

{
  "tasks": {
    "start": "deno run --allow-net --allow-read index.tsx",
    "island": "deno bundle ./islands/index.ts ./islands/bundle.js"
  },
  "imports": {
    "nano-jsx": "npm:nano-jsx@0.0.37",
    "oak": "https://deno.land/x/oak@v10.6.0/mod.ts"
  },
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "dom.asynciterable",
      "deno.ns"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "npm:nano-jsx@0.0.37/esm"
  }
}

But, look like npm is not yet 100% ready to use in Deno. deno bundle does not yet work with npm modules. So I can't run the deno task island.