Failed to import - react-dom because types file has "react" import path

[KyleJune]

Failing module

• GitHub:
• npm:

export { default as React } from "https://esm.sh/[email protected]?target=deno&pin=v85";
export { hydrateRoot } from "https://esm.sh/[email protected]/client?target=deno&pin=v85&[email protected]";
export { renderToReadableStream } from "https://esm.sh/[email protected]/server?target=deno&pin=v85&[email protected]";

Error message

deno run works even with --check=all, but if I try vendoring the module with deno vendor it fails because of the import path.

After running deno vendor example.ts I got this:

error: Relative import path "react" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v85/@types/[email protected]/client~.d.ts"

Additional info

• esm.sh version: v85
• Deno version: 1.22.2

If you open up that file, you'll find client~.d.ts is using import React = require('react');.

If I add the following import map and run vendor with it, vendor works.

{
  "imports": {
    "react": "https://esm.sh/[email protected]?target=deno&pin=v85"
  }
}

But if I run it with the import map generated by the vendor command, I get the following error. I don't get the error when not using the vendored module.

$ deno run --import-map=vendor/import_map.json example.ts
Check file:///home/kyle/Projects/deno/udibo/example.ts
error: TS2614 [ERROR]: Module '"file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/[email protected]/client.js"' has no exported member 'hydrateRoot'. Did you mean to use 'import hydrateRoot from "file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/[email protected]/client.js"' instead?
export { hydrateRoot } from "https://esm.sh/[email protected]/client?target=deno&pin=v85&[email protected]";
         ~~~~~~~~~~~
    at file:///home/kyle/Projects/deno/udibo/example.ts:2:10

TS2614 [ERROR]: Module '"file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/[email protected]/server.js"' has no exported member 'renderToReadableStream'. Did you mean to use 'import renderToReadableStream from "file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/[email protected]/server.js"' instead?
export { renderToReadableStream } from "https://esm.sh/[email protected]/server?target=deno&pin=v85&[email protected]";
         ~~~~~~~~~~~~~~~~~~~~~~
    at file:///home/kyle/Projects/deno/udibo/example.ts:3:10

Found 2 errors.

Another issue I had with deno vendor and esm.sh but don't have a minimal reproduction path is shown below. When I run my application without vendoring, it works fine but when I vendor it I get this error from esm types.

error: AssertionError: "data" is unexpectedly null for "https://esm.sh/v85/@types/[email protected]/X-ZC9yZWFjdC1kb21AMTguMS4wLHJlYWN0QDE4LjEuMA/index.d.ts".
    at assert (deno:cli/tsc/99_main_compiler.js:71:13)
    at Object.getSourceFile (deno:cli/tsc/99_main_compiler.js:310:7)
    at findSourceFileWorker (deno:cli/tsc/00_typescript.js:116391:29)
    at findSourceFile (deno:cli/tsc/00_typescript.js:116300:26)
    at deno:cli/tsc/00_typescript.js:116252:85
    at getSourceFileFromReferenceWorker (deno:cli/tsc/00_typescript.js:116218:34)
    at processSourceFile (deno:cli/tsc/00_typescript.js:116252:13)
    at deno:cli/tsc/00_typescript.js:116543:17
    at Object.forEach (deno:cli/tsc/00_typescript.js:377:30)
    at processReferencedFiles (deno:cli/tsc/00_typescript.js:116542:16)

I looked at the file and found the following lines, I believe they are responsible for the above error.

// tslint:disable-next-line:export-just-namespace
export = React;
export as namespace React;

[KyleJune]

I had a similar relative import path issue with another module of mine too.

https://esm.sh/@twind/[email protected]?target=deno&pin=v85

error: Relative import path "twind" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v85/@twind/[email protected]/preset-tailwind.d.ts"

When I checked that file, I found the import path is the same as it is originally before esm transformation. I believe 'twind' should have been replaced with a url to the esm module for it.

import { BaseTheme, MaybeArray, CSSProperties, Preset } from 'twind';

Adding "twind": "https://esm.sh/[email protected]?target=deno&pin=v85", to the import map used for vendoring resolves that issue.

[ije]

@KyleJune thanks for reporting! i guess the vendor error was caused by deno CLI, can you please create a pr for deno repo?

[ije]

import { BaseTheme, MaybeArray, CSSProperties, Preset } from 'twind';

yes, this types is incorrect, i will fix it asap!

[KyleJune]

@KyleJune thanks for reporting! i guess the vendor error was caused by deno CLI, can you please create a pr for deno repo?

I think it's this line in the esm file that is causing the issue though. This export doesn't look valid but If I'm mistaken I'll go ahead and create an issue on the deno repo.

export = React;

[ije]

@KyleJune thanks for reporting! i guess the vendor error was caused by deno CLI, can you please create a pr for deno repo?

I think it's this line in the esm file that is causing the issue though. This export doesn't look valid but If I'm mistaken I'll go ahead and create an issue on the deno repo.

export = React;

The React is a namespace defined below:

// tslint:disable-next-line:export-just-namespace
export = React;
export as namespace React;

declare namespace React {
  function createElement()
  ...
}

[KyleJune]

@KyleJune thanks for reporting! i guess the vendor error was caused by deno CLI, can you please create a pr for deno repo?

I think it's this line in the esm file that is causing the issue though. This export doesn't look valid but If I'm mistaken I'll go ahead and create an issue on the deno repo.

export = React;

The React is a namespace defined below:

// tslint:disable-next-line:export-just-namespace
export = React;
export as namespace React;

declare namespace React {
  function createElement()
  ...
}

Done.

https://github.com/denoland/deno/issues/14798

[jespertheend]

I ran into a similar issue, not sure if I should create a separate bug report for this. When trying to vendor https://esm.sh/[email protected] and now also I ran into a Relative import path "http" not prefixed with / or ./ or ../ error. The reason seems to be that many node type files contain something like:

declare module 'events' {
    // ...
}
declare module 'https://esm.sh/v87/@types/node/events.d.ts' {
    import events = require('events');
    export = events;
}

in https://esm.sh/v87/@types/node/events.d.ts for example.

I have opened https://github.com/denoland/deno/issues/15206