Missing declaration file

[coren-frankel]

Apologies for the sloppy transition to ES building starting from my PR. This is quite a can of worms. 🪱

After following the updates today on #83, with v2.0.0 my IDE is showing me the following problem when I attempt:

import Html from 'react-pdf-html';

VS code prompts me with this:

Could not find a declaration file for module 'react-pdf-html'. '.../nodemodules/.pnpm/react-pdf-html@2.0.0@react-pdf+renderer@3.4.2_react@18.2.0/node_modules/react-pdf-html/dist/esm/index.js' implicitly has an 'any' type. There are types at '.../node_modules/react-pdf-html/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'react-pdf-html' library may need to update its package.json or typings.ts(7016)

The error has led me to consider whether the types must be explicitly given to the "exports" prop of the package.json. In this blog walkthrough they do this:

...
 "exports": {
    ".": {
      "types": "./dist/types/index.d.ts", // New
      "require": "./dist/cjs/index.js",
      "import": "./dist/esm/index.js",
      "default": "./dist/esm/index.js" // New
    }
  }
 "types": "dist/types/index.d.ts",
...

My gut tells me this is what we're missing, but my gut has been wrong.

[danomatic]

No problem! This is all new for me so I'm learning along with you. Try the new version I just published: v2.0.3

[coren-frankel]

It looks like that change in v2.0.3 solves import error, and I can confirm that it works in my development environment when I render the PDF with the @react-pdf/renderer PDFViewer.

However, in my dominant implementation, I receive an error about the css-tree import:

Named export 'parse' not found. The requested module 'css-tree' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'css-tree';
const { generate, parse: cssParse, } = pkg;

I don't have any immediate ideas... If you'd prefer, I can make this a new issue and close this one.

[danomatic]

I think a short term solution is to set esModuleInterop: true in your tsconfig. Or try editing the file directly in your node_modules and let me know if a specific way of doing it works better. ES modules are so so finicky.

[coren-frankel]

Thank you! I tried esModuleInterop, but didn't get any change. I'll try the latter tomorrow, and weigh if there's a change I'd like to propose. I look forward to stabilizing this bad boy.

[anajavi]

Running v2.0.3 in plain javascript esm project also causes the import error with css-tree. esModuleInterop is not an option without typescript.

Does the node suggestion cause other problems? As it seems to work if I change the parse.js under node_modules:

import pkg from 'css-tree';
const { generate, parse: cssParse, } = pkg;

[danomatic]

Ok I gave that a try. In the source code it didn't allow it to be exactly as you have it. I just published v2.0.4 with this:

import * as cssTree from 'css-tree';
const { generate, parse: cssParse } = cssTree;

[coren-frankel]

Nice! I had done the same thing in the PR I had almost sent this morning. Too slow!

I can confirm v2.0.4 is ESM-friendly in my TS ESM project. @anajavi, I reckon you should be good to go too, but if you have any new errors let's pick it up in a new issue.

Thanks again, @danomatic! I'll probably be digging through the issues for other ways to contribute to the package soon.