Search code examples
webpackyarnpkg

Migrate to yarn PnP: integrating webpack resolve.modules with pnp


I use a similar pattern from the webpack documentation so that I can traverse my components like modules. Instead of using ../../../path/to/component. I just do /path/to/component.

I am using yarn@latest and hoping to migrate to Plug n Play (pnp). I am wondering if there is a way to migrate this configuration so I can still take advantage of it. Possibly a way to require.resolve all modules?

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

Solution

  • https://yarnpkg.com/features/protocols#why-is-the-link-protocol-recommended-over-aliases-for-path-mapping

    As the documentation says, this was supported out of the box with yarn 2. No further configuration was required

    Getting it to run with mocha tests was more complicated though and eventually I had to utilize a babel compiler to convert the module components to normal traversing before running the test