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

KyleJune commented 2 years ago

Failing module

GitHub:
npm:

export { default as React } from "https://esm.sh/react@18.1.0?target=deno&pin=v85";
export { hydrateRoot } from "https://esm.sh/react-dom@18.1.0/client?target=deno&pin=v85&deps=react@18.1.0";
export { renderToReadableStream } from "https://esm.sh/react-dom@18.1.0/server?target=deno&pin=v85&deps=react@18.1.0";

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/react-dom@18.0.5/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/react@18.1.0?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/react-dom@18.1.0/client.js"' has no exported member 'hydrateRoot'. Did you mean to use 'import hydrateRoot from "file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/react-dom@18.1.0/client.js"' instead?
export { hydrateRoot } from "https://esm.sh/react-dom@18.1.0/client?target=deno&pin=v85&deps=react@18.1.0";
         ~~~~~~~~~~~
    at file:///home/kyle/Projects/deno/udibo/example.ts:2:10

TS2614 [ERROR]: Module '"file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/react-dom@18.1.0/server.js"' has no exported member 'renderToReadableStream'. Did you mean to use 'import renderToReadableStream from "file:///home/kyle/Projects/deno/udibo/vendor/esm.sh/react-dom@18.1.0/server.js"' instead?
export { renderToReadableStream } from "https://esm.sh/react-dom@18.1.0/server?target=deno&pin=v85&deps=react@18.1.0";
         ~~~~~~~~~~~~~~~~~~~~~~
    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/react@18.0.11/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 commented 2 years ago

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

https://esm.sh/@twind/preset-tailwind@1.0.0-next.38?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/preset-tailwind@1.0.0-next.38/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/twind@1.0.0-next.38?target=deno&pin=v85", to the import map used for vendoring resolves that issue.

ije commented 2 years ago

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

ije commented 2 years ago

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

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

KyleJune commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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/clean-css@5.3.0 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

esm-dev / esm.sh