bug: Invalid ESM-style import of `./visit`

[tvsbrent]

Repo:

1.) In an existing project, run npm install rehype-rewrite@2.0.1 2.) With Node 14 installed, from the command line run node --experimental-repl-await --experimental-modules 3.) In the Node REPL, run the following code: let rehypeRewrite = await import('rehype-rewrite')

Results: The following error message is displayed:

Uncaught:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<path>/node_modules/rehype-rewrite/lib/visit' imported from <path>/node_modules/rehype-rewrite/lib/index.js
    at finalizeResolution (internal/modules/esm/resolve.js:271:11)
    at moduleResolve (internal/modules/esm/resolve.js:694:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:805:11)
    at Loader.resolve (internal/modules/esm/loader.js:88:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:241:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:72:40)
    at link (internal/modules/esm/module_job.js:71:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Notes:

My guess is that the TypeScript compilation is not adding the needed .js extension to the generated code.

[jaywcjlove]

@tvsbrent https://nodejs.org/api/esm.html#esm_enabling

node --input-type=module

[tvsbrent]

Unfortunately, a dependency that references this library, @uiw/react-markdown-preview, is importing this in one of our projects that has not yet converted to ESM. This is causing our Webpack builds to fail with this error:

ERROR in ./node_modules/rehype-rewrite/lib/index.js 1:0-28
  Module not found: Error: Can't resolve './visit' in '/<path>/node_modules/rehype-rewrite/lib'
  Did you mean 'visit.js'?
  BREAKING CHANGE: The request './visit' failed to resolve only because it was resolved as fully specified
  (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
  The extension in the request is mandatory for it to be fully specified.
  Add the extension to the request.

It seems that Node knows this is module is defined as an EcmaScript Module, but wants to enforce the file extension.

For the time being, I've pinned our version of the markdown library to the last version that referred to the 1.x version of this dependency.

[jaywcjlove]

@tvsbrent Learn more about ESM in this guide

[jaywcjlove]

or npm install rehype-rewrite@1.1.0

[tvsbrent]

That is what I'm doing currently, however, I am having to do this with the dependency referring to your module. I'll let the authors of that library know and maybe they can come up with a better solution.

[tvsbrent]

One thing I thought worth mentioning, if you look at one of the repos for the author of the guide you referenced above, you'll see he is including .js extensions for the files he is importing. This is the case even though he is working entirely in TypeScript:

https://github.com/sindresorhus/got/blob/main/source/index.ts#L1-L3

[jaywcjlove]

Need to add .js? https://uiwjs.github.io/npm-unpkg/#/pkg/rehype-rewrite@2.1.0/file/lib/index.js

@tvsbrent

[tvsbrent]

According to this issue in TypeScript, you need to write the import as you want it to appear in the JS:

https://github.com/microsoft/TypeScript/issues/40878

So, as I understand the recommendation, you need to write ./visit.js in the TypeScript file.

[tvsbrent]

Saw that you just did a release and I tried the above repro steps, and the module imported successfully. Thanks for the fix!

[jaywcjlove]

@tvsbrent thx!