Working around imports without a file extension
I'm facing an apparent contradiction between the requirements for importing modules, and the import statements generated by jsx compilation.
The deno module docs cleary state that imports must explicitly specify a file extension:
It adopts browser-like module resolution, meaning that file names must be specified in full. You may not omit the file extension and there is no special handling ofWhen deno compiles jsx/tsx, it inserts import statements that violate this requirement:index.js.import { add, multiply } from "./arithmetic.ts";
When using the automatic transforms, Deno will try to import a JSX runtime module that is expected to conform to the new JSX API and is located at eitherAs someone who is not deeply familiar with javascript/typescript tooling and modules, this leaves me completely stumped. I can successfully configure deno to use a custom jsx factory, but it refuses to compile due to faulty imports that it itself inserted and that I cannot seem to influence. To turn this into a question: help?jsx-runtimeorjsx-dev-runtime. For example if a JSX import source is configured toreact, then the emitted code will add this to the emitted file:import { jsx as _jsx } from "react/jsx-runtime";
3 Replies
Later, the deno jsx docs propose using import maps as a workaround:
In situations where the import source plusThat sentence seems to imply that there also are situations where "import source plus/jsx-runtimeor/jsx-dev-runtimeis not resolvable to the correct module, an import map can be used to instruct Deno where to find the module.
/jsx-runtime or /jsx-dev-runtime" is resolvable. What would these situations look like?
I'm hesitant about import maps as a workaround because the import map docs explicitly warn that they are only used for applications but not for libraries. There has to be a way to use custom jsx in libraries, though. Right?I agree that it would make sense for a lib to use its own JSX runtime. Even with
@jsxImportSource pragma, it seems we can't set a local runtime without import map.
Currently, I work around this by calling jsx function manually in regular ts files.Found a similar question on here, unfortunately no answers: https://discord.com/channels/684898665143206084/1105151692766457907/1105151692766457907