How do you use resolve.alias in webpack?

Max Rozen

webpack has an option called resolve which can help prevent some gnarly errors in packages like React and GraphQL.

What happens is, some packages choose to include common packages as dependencies rather than as peer dependencies. Net result is that your bundle ends up larger, or in the case of React or GraphQL packages, you get random errors.

In React, having more than one version of React in your dependencies can cause this common error: hooks can only be called inside the body of a function component.

Luckily for us, the fix is pretty simple - we add the following to our webpack config:

resolve: {
alias: {
react: path.dirname(require.resolve('react')),

Do you struggle to keep up with best practices in React?

I send a single email every two weeks with an article like this one, to help you keep track of what's happening in the React ecosystem.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 1,555 React developers that have signed up so far!