How do you use resolve.alias in webpack?
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')), }, }
(Shameless plug for the useEffect book I wrote below)
Tired of infinite re-renders when using useEffect?
A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.
Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.
In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.
