JSR package CommonJs dependency is not transpiled by Vite

[danielbeeke]

Use case

I try to use JSR in the context of front end libraries and a browser app. I published @shapething/shacl-renderer. When trying to import it in Vite the commonjs dependencies are not transpiled / picked up.

Minimal working example

https://github.com/danielbeeke/mwe-jsr-react-commonjs

Error

Uncaught Error: Module "npm:jsonld-context-parser@^3.0.0" has been externalized for browser compatibility. Cannot access "npm:jsonld-context-parser@^3.0.0.JsonLdContextNormalized" in client code.  See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
    get __vite-browser-external:npm:jsonld-context-parser@^3.0.0:3
    <anonymous> main.tsx:1
__vite-browser-external:npm:jsonld-context-parser@^3.0.0:3:12

The problem seems to be that the package is not resolved when running the project. It is transpiled into this:

/** @jsxRuntime classic *//** @jsxFactory React.createElement *//** @jsxFragmentFactory React.Fragment */import { JsonLdContextNormalized } from "npm:jsonld-context-parser@^3.0.0";
import { JSX } from "npm:react@^19.0.0";

type Props = {
  prefixes?: Record<string, string>;
  iri: string;
};

export default function Compactor ({ iri, prefixes }: Props): JSX.Element {
  const context = new JsonLdContextNormalized({
    ...prefixes,
  });

  return <span>{context.compactIri(iri)}</span>;
}