Error: Cannot resolve ‘file’ or ‘directory’

If you just tried to add a new require or import to your React project (that’s using webpack + babel-loader) trying to pull in a new component (say search.jsx — note specifically the jsx extension) and are getting an error that looks something like the following:

Error: Cannot resolve 'file' or 'directory'

…chances are, that you need to tell webpack to resolve the jsx extension:

module.exports = {
 // ...
 resolve: {
  extensions: [ '', '.js', '.jsx' ];
 // ...

Note that you may need others depending on the loaders you have.

Published by Mo Jangda

I wrangle code at Automattic. I enjoy ice cream.

%d bloggers like this: