Next.js: Support Yarn PnP

[jacobwgillespie]

Feature request

It would be nice to have support for Yarn PnP, now that it's officially stable in Yarn 1.12. Here's some info on enabling it: https://gist.github.com/arcanis/02b49752c385908479734d8027d7a6c7.

Create React App 2.0 supports PnP via pnp-webpack-plugin, so it might be a nice reference for implementation.

[balupton]

For those wondering, this is the error:

```

yarn run now-build
yarn run v1.13.0
$ yarn run our:compile:next
$ next build
internal/modules/cjs/loader.js:605
throw err;
^

Error: Cannot find module 'cross-spawn'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/balupton/Library/Caches/Yarn/v4/npm-next-8.0.0-canary.14-7b358d8359b57274fb28ce0df660956a21b5990f/node_modules/next/dist/bin/next:8:39)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
````

[balupton]

Running yarn --disable-pnp resolves it.

[jth0024]

Just to add some additional info, I created a new project with only NextJS, the PnpWebpackPlugin, and a single page file. It looks like this:

package.json

{
  "installConfig": {
    "pnp": true
  },
  "scripts": {
    "dev": "next"
  },
  "dependencies": {
    "next": "8.1.0",
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "pnp-webpack-plugin": "1.4.3"
  }
}

next.config.js

const PnpWebpackPlugin = require('pnp-webpack-plugin')

module.exports = {
  webpack(config) {
    if (!config.resolve) config.resolve = {}
    if (!config.resolveLoader) config.resolveLoader = {}
    if (!config.resolve.plugins) config.resolve.plugins = []
    if (!config.resolveLoader.plugins) config.resolveLoader.plugins = []

    config.resolve.plugins.push(PnpWebpackPlugin)
    config.resolveLoader.plugins.push(PnpWebpackPlugin.moduleLoader(module))

    // Return the modified config
    return config
  },
}

pages/index.js

export default () => (<div>Hello, World!</div>)

If I run yarn dev with this minimal configuration, I receive this error:

[Timer]

Yarn PnP now works out of the box!

[Ciantic]

Is there an example of this? I don't think people get this working because anything non-trivial uses CSS plugin that does not work, see here:

https://github.com/zeit/next-plugins/issues/550