Skip to content

Commit 4fd7aac

Browse files
committed
Set resolve modulesDirectories so module resolves default to Gatsby (#299)
This was the previous behavior but a387663 moved our resolve.modulesDirectories config to resolve.root which while speeding up resolving (and bringing us in line with Webpack's suggested setup https://webpack.github.io/docs/resolving.html) did break certain important use cases. I discovered this recently when my Gatsby site for React Headroom broke. I rebuilt the react-headroom in Gatsby using 0.11.0. After making some changes, I rebuilt it with 0.11.1. A user then pointed out that the site was now broken (KyleAMathews/react-headroom#82). After investigating, the problem turned out that two copies of React were being loaded. One from Gatsby and another from React Headroom. The Gatsby site is in a subdirectory of the React Headroom and imported the Headroom component from its src directory (i.e. `import Headroom from '../../src/index.js'`). This component in turn imported React. The default Webpack module resolution algorithm is similar to the node.js resolving process and looks for the nearest node_modules directory. This is generally what we want but causes trouble when both Gatsby and another node_modules directory provide the same module. So to fix this, this commit makes Webpack default to looking inside the Gatsby site's node_modules directory and only thereafter looks in the node_modules relative to the module being resolved. So for the React Headroom component, React is now being correctly resolved from the Gatsby site preventing the "two copies of React" problem but react-addons-pure-render-mixin, a direct dependency of React Headroom that's not included in Gatsby, is resolved to the Headroom node_modules directory.
1 parent a4554db commit 4fd7aac

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

lib/utils/webpack.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,10 @@ module.exports = (program, directory, stage, webpackPort = 1500, routes = []) =>
158158
directory,
159159
path.resolve(__dirname, '..', 'isomorphic'),
160160
],
161+
modulesDirectories: [
162+
`${directory}/node_modules`,
163+
'node_modules',
164+
],
161165
}
162166
}
163167

0 commit comments

Comments
 (0)