cannot import react-pdf-html v1.3.2 in plain esm project

[anajavi]

The package.json points to directory mjs, which does not exist:

react-pdf-html/package.json

Line 23 in 7799a3f

"import": "./dist/mjs/index.js",

fixing that to point to "./dist/esm/index.js" causes another problem:

 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/proj/node_modules/react-pdf-html/dist/esm/Html'

I guess it is caused by missing .js extensions in dist/esm/index.js:

export { default, default as Html } from './Html';

[yaredtsy]

its also happening to me since today.

  ✘ [ERROR] Failed to resolve entry for package "react-pdf-html". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

[danomatic]

We just added support for ES modules. Please try v1.3.3 and report back on whether that resolved it!

[anajavi]

The v1.3.3 fixed the import directory, but node still complains about missing file extension. I guess that the .js extensions should be added to the source code. Typescript does not seem to have an option to add those extensions.

test.mjs contains only the import:

import html from 'react-pdf-html';

output:

$ node test.mjs
node:internal/modules/esm/resolve:264
    throw new ERR_MODULE_NOT_FOUND(
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/proj/node_modules/react-pdf-html/dist/esm/Html' imported from /proj/node_modules/react-pdf-html/dist/esm/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:264:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///proj/node_modules/react-pdf-html/dist/esm/Html'
}

Node.js v20.11.0

[danomatic]

Ok try v1.3.4

[anajavi]

Ok try v1.3.4

The v1.3.4 is better, but still fails with:

$ node test.mjs
file:///proj/node_modules/react-pdf-html/dist/esm/parse.js:1
import { NodeType, parse, } from 'node-html-parser';
         ^^^^^^^^
SyntaxError: Named export 'NodeType' not found. The requested module 'node-html-parser' 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 'node-html-parser';
const { NodeType, parse, } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:113:12)

Node.js v20.11.0

[danomatic]

Hmm ok. I'm not sure how to handle 3rd party libraries being CommonJS, but I just updated all the dependences and published v.1.3.5. Try that!

[danomatic]

I just published a new version v1.3.6 that does not require esModuleInterop

[danomatic]

This test seems to work now:

import Html, { renderHtml } from 'react-pdf-html';

console.log(renderHtml('<div />'))

Please reopen or reply if it's still broken for you

[anajavi]

v1.3.7 works fine. Thank you!

[danomatic]

Hmm...but I am getting this when I bundle it with esbuild:

▲ [WARNING] Calling "fetch" will crash at run-time because it's an import namespace object, not a function [call-import-namespace]

    ../../node_modules/react-pdf-html/dist/esm/resolveCssFile.js:49:21:
      49 │     const response = fetch(uri, options);
         ╵                      ~~~~~

  Consider changing "fetch" to a default import instead:

    ../../node_modules/react-pdf-html/dist/esm/resolveCssFile.js:4:7:
      4 │ import * as fetch from 'sync-fetch';
        │        ~~~~~~~~~~
        ╵        fetch

Anyone have any suggestions for avoiding that?

[anajavi]

Hmm...but I am getting this when I bundle it with esbuild:

I am not familiar with esbuild, but maybe requiring sync-fetch would work?

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const fetch = require('sync-fetch');

Typescript might do the trick with import x = require("..."):
https://www.typescriptlang.org/docs/handbook/modules/reference.html#emit

[danomatic]

I decided not to support local external stylesheets and fs/url/sync-fetch in v2.0.0