configuring webpack in yarn workspaces

Question

I am migrating some repos to a monorepo that uses yarn workspaces with Lerna. The packages look roughly like this:

|-- packages
    |-- app
    |-- components-1 
    |-- components-2

app is bundled with webpack. It includes both components-1 and components-2 as dependencies, as well as React 15.3.2.

components-1 includes a peer dependency of React 15.6.1. So it has React 15.6.1 is a dev dependency. This is needed for running react-styleguidist and tests from within that package, and is mostly an artifact from its existence as a separate repo, pre-migration.

It seems that, because there are two versions of React, webpack will bundle both because both resolve successfully at different locations. React 15.3.2 gets installed in the repo's root-level node_modules, while React 15.6.1 gets installed in components-1/node_modules.

The same occurs for ReactDOM, as one might expect.

My solution has been to define aliases for react and react-dom in the app's webpack config:

resolve: {
  alias: {
    'react': path.resolve('../../node_modules/react'),
    'react-dom': path.resolve('../../node_modules/react-dom'),
  },
}

But this seems a bit hacky to me, since it will only work within this yarn workspaces set up.

I'm wondering if there is a better way to do this, either in the webpack config off the app, or in some kind of yarn workspaces configuration.

Sean Larkin Sean Larkin · Accepted Answer · 2019-05-10T21:54:05

webpack determines module uniqueness based on its file path. Therefore, if you have two copies of react, coming from two separate node modules paths, then yes, webpack will bundle both. However, if you say you are using yarn workspaces, this should mean that your monorepo should only have one node_modules folder.

configuring webpack in yarn workspaces

1 Answers