Package path not exported in Happy-Wrapper

[emfax]

Describe the bug

Cannot run Vite dev server when vite-plugin-md is used.

Reproduction

https://github.com/emfax/vite-plugin-md-repro

System Info

System:
    OS: macOS 11.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Memory: 124.95 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 19.2.0 - /usr/local/bin/node
    pnpm: 7.17.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[yankeeinlondon]

more details please ... what error are you getting. it's working fine for me. you can't expect library authors to clone, pull down deps, and then build and test. Also, please be sure your package.json has { "type": "module" } I was getting a few erroneous error claims before but now that we're moving fully to ESM there are no CJS builds. Shouldn't be a problem for anyone using Vite.

[emfax]

Sorry, here's the error,

failed to load config from /Users/emfax/devs/vite-plugin-md-repro/vite.config.ts
error when starting dev server:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/emfax/devs/vite-plugin-md-repro/node_modules/.pnpm/vite-plugin-md@0.21.5_fvgcjniyfwdy3um75ioxolw5si/node_modules/@yankeeinlondon/happy-wrapper/package.json
    at new NodeError (node:internal/errors:393:5)
    at exportsNotFound (node:internal/modules/esm/resolve:295:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:575:13)
    at resolveExports (node:internal/modules/cjs/loader:538:36)
    at Module._findPath (node:internal/modules/cjs/loader:607:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1025:27)
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/emfax/devs/vite-plugin-md-repro/node_modules/.pnpm/vite-plugin-md@0.21.5_fvgcjniyfwdy3um75ioxolw5si/node_modules/vite-plugin-md/dist/index.cjs:18031:28)
 ELIFECYCLE  Command failed with exit code 1.

[WantenMN]

I had the same problem and solved it, just add "type": "module" in my package.json.

[yankeeinlondon]

Yes this is the error a number of folks are having but it's just the one line fix I suggested and it relates to the fact that ViteJS (and esbuild and Rollup too) are both ESM-first bundlers so they like ESM and tolerate CJS. The king of the world for many of the last 10 years was Webpack which was having a love affair with CJS and only let ESM over for brief visits (speaking figuratively of course).

Ultimately this means that most of the "defaults" in the JS world today are still CJS but if you're using a ViteJS build system then you can easily switch to ESM and probably should. If you use any ESM only packages which in turn have ESM only dependencies you must switch to ESM. Fortunately that's just a matter of changing your package.json as I had mentioned above.

Good luck and welcome to the post-CJS world.

[emfax]

Adding "type": "module" to package.json fixed the problem.

Maybe this should be added to the readme.

A few CJS config files caused some issues when adding "type": "module" to package.json, so anyone else reading this with the same problem, convert your CJS config files to ESM. Worked for me.

[duzhipeng]

I have the same problem.But when I adding "type": "module" to package.json,that's gonna lead to another problem.

Problem encountered during the "parser" stage of the vite-plugin-md transform pipeline:

  Dynamic require of "file:///Users/.../node_modules/markdown-it-prism/build/index.js" is not supported
...

At last,

If you want to use this plugin together with Webpack, you need to import all languages you intend to use:

import MarkdownIt from 'markdown-it';
import prism from 'markdown-it-prism';

import "prismjs/components/prism-clike"
import "prismjs/components/prism-java"

function component() {
	const md = new MarkdownIt();
	md.use(prism);
	const element = document.createElement('div');
	element.innerHTML = md.rend
...

[puyuchun]

I had a same problem and solved it.but that's lead to another problem. the file of .eslint.js doesn't work, Node.js will treat as CommonJs if the nearest parent package.json file not contains a top-level "type" field with a value of "module". Of course, I have to change the .js to .cjs. it's a little troublesome.

[yankeeinlondon]

@puyuchun if your application has module resolution set to module then you just need to make sure .js files are in ES Module syntax (aka, imports not requires). Yes you can also explicitly keep to a an old school eslint.cjs syntax too but if I were you I'd move over to the modern syntax.

[yankeeinlondon]

@duzhipeng are you using the code plugin or just the bare plugin?

[duzhipeng]

@duzhipeng are you using the code plugin or just the bare plugin?

The markdown-it-prism is https://github.com/jGleitz/markdown-it-prism what I used.
I used the only plug-in according to the instructions.
By the way,I had found vite-plugin-vue-markdown may be used, then I installed it.
Now, everything is OK!

[yankeeinlondon]

@duzhipeng thanks for giving me some more resolution on this. Before the split of this plugin from vite-plugin-vue-markdown I had been trying to be sure that any new functionality I brought in be optional and via a plugin system. That included a plugin for code highlighting which is ok but probably with a few rough edges still. I hope to get a new release of this plugin out in the next week and with it there will be some improvements for people who want to hook into the lifecycle but don't want to build a plugin as well as I think I'll bring the code plugin back into the core package (it will still need to be enabled as a config option). Anyway, once this release is out I'd love your feedback on whether it works for you.