Incompatible with Yarn 2 / berry

[DerDrodt]

Do you want to request a feature or report a bug?

Feature

What is the current behaviour?

When running the CLI with Yarn 2, because of Plug'n'Play, we get an error:

ERROR No node_modules found! Please run npm install before continuing.

If the current behaviour is a bug, please provide the steps to reproduce.

Install Yarn 2 and run preact build

What is the expected behaviour?

It should be able to build with Yarn 2

If this is a feature request, what is motivation or use case for changing the behaviour?

Developers will want to use the new version of Yarn.

Please mention other relevant information.

As far as I can tell, the problem is that the loaders in the Webpack configs are not declared using require.resolve. Doing so would allow us to use the pnp-Webpack-plugin

Please paste the results of preact info here.
version 2.2.1

[rschristian]

I'm also having a similar issue with yarn 2, though my error message looks slightly different.

/home/runner/work/portfolio/portfolio/.pnp.js:23658
    throw firstError;
    ^

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

Required package: resolve-from (via "resolve-from")
Required by: preact-cli@virtual:b13403f544ae60ed18db7322dbe40ce5e5b7a27527d99666902b0cbfb04ef45f841e7aa0c277aa82316facbf58907381a40ff63acfc131de85da500a609d224e#npm:3.0.0-rc.10 (via /home/runner/work/portfolio/portfolio/.yarn/$$virtual/preact-cli-virtual-3d06aac47b/0/cache/preact-cli-npm-3.0.0-rc.10-d33f292597-2.zip/node_modules/preact-cli/lib/lib/webpack/)

[DerDrodt]

I'm also having a similar issue with yarn 2, though my error message looks slightly different.

That can easily be fixed (although preact-cli should fix it themselves)

Just add a .yarnrc.yml with the following contents:

packageExtensions:
    "preact-cli@*":
        dependencies:
            "mkdirp": "*"

Side-note: to make preact-cli work right now, also add:

nodeLinker: node-modules

But that's not ideal

[rschristian]

Fair enough, thanks! Least got me able to use Yarn 2, even if it's less than ideal.

[ForsakenHarmony]

@DerDrodt you're welcome to contribute a fix

[DerDrodt]

@DerDrodt you're welcome to contribute a fix

I tried to, but I am not really good with Webpack. Simply using require.resolve for all loaders didn't work. I don't really know enough about that

[caass]

@DerDrodt I was able to get it working with pnp-webpack-plugin. After installing this and configuring it (shown below), I just added a .gitkeep in node_modules to let the check pass.

import { resolve } from "path";
import PnpWebpackPlugin, { moduleLoader } from "pnp-webpack-plugin";

export default {
  webpack(config, env, helpers, options) {
    // other stuff...

    // Let webpack work with PnP stuff
    config.resolve["plugins"] = [PnpWebpackPlugin];
    config.resolveLoader["plugins"] = [moduleLoader(module)];
  },
};

It would probably be a little bit non-trivial to fix up preact to work for this, but it would basically entail adding another check for some kind of .pnp.js and adding in the pnp-webpack-plugin to the config.

[kerey]

Using node linker in .yarnrc.yml solved this problem for me:
nodeLinker: node-modules

[vibe]

For anyone who stumbles on this in the future.

As some of the others have stated, Preact is not handling dependencies properly and relies on awkward behavior.

You do not need to modify your .yarnrc.yml, just add the mkdirp dependency to your root workspace.

You also do not need to enable the node-modules linker, you can abuse the same awkward behavior the preact-cli uses to accommodate the build process.

"build": "yarn node boot-preact.js && pnpify preact build --no-prerender"

const { ensureDirSync, copySync} = require('fs-extra')
const { dirname } = require('path')
const preact = require.resolve('preact')
const preactRenderToString = require.resolve('preact-render-to-string')


ensureDirSync('./node_modules/')

copySync(preact, './node_modules/preact.js')
copySync(dirname(preactRenderToString), './node_modules/preact-render-to-string')