Does not work when using Yarn Plug'n'play.

[Ulyanov-programmer]

Greetings!

I tried to run your plugin through the yarn package manager, using plug'n'play technology.
I was running the plugin via gulp.

Launch code

import gulp from 'gulp'
import browsersync from 'browser-sync'
import posthtml from 'gulp-posthtml'
import component from 'posthtml-component'

export default function html() {
  return gulp.src(paths.scr.html)
    .pipe(posthtml([
      component({
        root: './src',
        folders: ['components'],
      }),
    ], {}))

   // another code

    .pipe(gulp.dest(paths.build.html))
    .pipe(browsersync.stream())
}

When importing (it is when importing, the code in the task does not affect) yarn throws the following error:

Error in terminal:

Error: posthtml-component tried to access posthtml, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: posthtml (via "posthtml\lib\api")
Required by: posthtml-component@npm:1.1.0 (via C:\Users\ccold\Desktop\gulp_multitool\.yarn\cache\posthtml-component-npm-1.1.0-25202f75ea-e80a90023f.zip\node_modules\posthtml-component\src\)

Require stack:
- C:\Users\ccold\Desktop\gulp_multitool\.yarn\cache\posthtml-component-npm-1.1.0-25202f75ea-e80a90023f.zip\node_modules\posthtml-component\src\index.js
    at require$$0.Module._resolveFilename (C:\Users\ccold\Desktop\gulp_multitool\.pnp.cjs:19041:13)
    at require$$0.Module._load (C:\Users\ccold\Desktop\gulp_multitool\.pnp.cjs:18891:42)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (C:\Users\ccold\Desktop\gulp_multitool\.yarn\cache\posthtml-component-npm-1.1.0-25202f75ea-e80a90023f.zip\node_modules\posthtml-component\src\index.js:6:23)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at require$$0.Module._extensions..js (C:\Users\ccold\Desktop\gulp_multitool\.pnp.cjs:19085:33)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at require$$0.Module._load (C:\Users\ccold\Desktop\gulp_multitool\.pnp.cjs:18904:22)

This is similar to a typical error for plugins not adapted for yarn plug'n'play, which consists in an ambiguous designation of a dependency on another package.

A link on the repository (see the develop branch) where I conducted the launch.

These links should help you:
Documentation of Yarn plug'n'play technology
API documentation for this technology
A page on stackoverflow, which, apparently, refers to this problem

P.S: I managed to find a temporary solution, it consists in explicitly specifying dependencies. After entering the code, you must use the yarn command.

Code in .yarnrc.yml

packageExtensions:
  posthtml-component@*:
   dependencies:
      posthtml: '*'
  posthtml-expressions@*:
    dependencies:
      posthtml: '*'

[thewebartisan7]

Thanks for info. At the moment I have no time to check into yarn docs to make this works, but if you already know how to make this works, PR is welcome. But your solution maybe is enough? I am not sure about best approach to handle this.

[Ulyanov-programmer]

At the moment, a temporary solution is enough for me personally.
This issue can be postponed for a very long time, anyway, yarn plug'n'play is the lot of a few...

And although the installation via yarn install works stably, in the future, it is desirable to find a solution, because it is not very convenient for each user to describe dependencies separately if they want to use plug'n'play.

[thewebartisan7]

I will surely look into. stackoverflow solution seem cover all package manager, but not sure pro and cons.
I will also check how others posthtml plugin handle this, if they even handle it. By quickly checking a few it seem doesn't.

[Ulyanov-programmer]

Some packages work stably (such as posthtml-easy-bem and posthtml-img-autosize), but there are also those that do not work (like posthtml-beautify).

[thewebartisan7]

Some packages work stably (such as posthtml-easy-bem and posthtml-img-autosize)

Can't find how they solve yarn issue?

[Ulyanov-programmer]

You are a cunning man, however!
I rummaged through the repository files of some plugins.
As far as I remember, plug'n'play doesn't like it when a module references something that isn't in package.json.

In the executable files of plugins that did not work, there is a similar import:

... require('posthtml/lib/api');

Yarn does not understand where you are referring to, therefore it gives an error.
There were no similar imports in the files of other plugins (one of them had no imports at all).
Otherwise, I'm just guessing.

P.S:
https://github.com/posthtml/posthtml-beautify/blob/0d349e522e2a28424abfd559975a7c83b75b4f11/src/index.js#L3
https://github.com/thewebartisan7/posthtml-components/blob/1775153783f79511c5f61f3e440db7e026acee12/src/index.js#L6

[Ulyanov-programmer]

I will try to make changes in my local copy of the plugin.

[thewebartisan7]

Yarn does not understand where you are referring to, therefore it gives an error.

If that is the rule, then check maybe also all lodash require like https://github.com/thewebartisan7/posthtml-components/blob/main/src/index.js#L17

I will try to make changes in my local copy of the plugin.

Ok let me know, if this is the working solution, let me know and I can quickly fix it immediately and release new version.

[thewebartisan7]

I will try to make changes in my local copy of the plugin.

Have you checked if this works?

[Ulyanov-programmer]

There are times when it's better for me not to do anything for my own health. Wait for some time, I will recover my strength and I will go back to work.

[thewebartisan7]

There is no hurry! Health first. If I find time I will try to reproduce the problem, and solve it. If you already have a repo with gulp + yarn send me the link, otherwise I try to recreate it. I haven't used gulp for long time.

[Ulyanov-programmer]

Link to the repo

Please note that the link is to the branch that interests you.
The launch takes place by entering yarn dev in the console.

The launch will fail because I have disabled the "temporary" solution. To return it, see the head text of this issue.
Your plugin is located in the folder: .yarn/cache/posthtml-component-npm-1.1.0-25202f75ea-e80a90023f.zip
Good luck! C:

P.S: Made small changes in the branch, if you downloaded it earlier, synchronize the changes.
By the way, judging by these lines, yarn sees all dependencies (if I didn't miss anything), except posthtml, even Lodash.
https://github.com/Ulyanov-programmer/gulp_multitool/blob/b44af2f44ff11814ded9cf0ab304e793cb398e5b/.pnp.cjs#L7813
The theory is confirmed.

[thewebartisan7]

@Ulyanov-programmer

By the way, judging by these lines, yarn sees all dependencies (if I didn't miss anything), except posthtml, even Lodash.

I think I figured out the problem because of this. posthtml was under devDependencies instead of under dependencies.

This commit should fixes the issue:

0c79060#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

Basically I just move posthtml from devDependencies to dependencies.
It seem like yarn plug'n'play works isolated for each packages, while in standard npm, even if a package is for example added in your project or in some other package, it still being found.

I did test with your repo and works fine.

Just add in your package.json this:

"posthtml-component": "github:thewebartisan7/posthtml-components#main",

to use latest version.

This is the output after updating:

Please to confirm that also works for you everything else, and then I will release new 1.1.1 version.

Thanks!

[Ulyanov-programmer]

It worked!
Everything works! I tried to pull this off the day before yesterday...

I will remove the temporary solution with your plugin, however, the bug has crept up from someone else's territory ...
The posthtml-expressions plugin that you use has exactly the same error, and the fixes in your plugin do not solve it.

I made changes in my repository so that you could see the error.

It was worth noting, but I also made a similar "temporary solution" for this plugin to make it work. As soon as I disabled the solution, because of this, despite the fix, the plugin could not be imported.
I could make an issue in the author's repository, but he hasn't answered them for a long time...

[Ulyanov-programmer]

If you think it's none of your business and/or you can't fix it, write here and close the issue.

[thewebartisan7]

Try open an issue on posthtml-expression, I am sure @Scrum will be happy to fix this issue.

To me seem the same issues, since I can see in console:

➤ YN0002: │ posthtml-expressions@npm:1.11.0 doesn't provide posthtml (p3eafc), requested by posthtml-match-helper

So basically just update package.json:

https://github.com/posthtml/posthtml-expressions/blob/master/package.json#L25

If @Scrum confirm you may just try to open a PR.

I don't think I can solve this without updating directly posthtml-expression plugin.

However, I notice there is same issue with prettier-plugin-css-order, see screenshot attached:

If there is anything I can fix in this plugin, let me know.

[Ulyanov-programmer]

The issue with the dependency of plugin posthtml-expressions has been resolved, try to update your plugin.
posthtml/posthtml-expressions#151
https://github.com/posthtml/posthtml-expressions/releases/tag/v1.11.1