Webpack require() Cannot resolve 'file' or 'directory'

Question

Silly question perhaps but... I'm building on app with Webpack (on Ubuntu), and I'm trying to require a JS file from another. My app looks something like this:

myapp/
  src/
    vendor/
      facebook.js
    components/
      layout/
        header/
          FacebookButtonComponent.js

And my Webpack configuration has the following in it:

const path = require('path');
const srcPath = path.join(__dirname, '/src');
resolve: {
  extensions: [
    '',
    '.js',
    '.jsx'
  ],
  alias: {
    components: `${ srcPath }/components`,
    vendor: `${ srcPath }/vendor`
  }
}

Then in FacebookComponent.js I'm requiring a facebook.js with:

require('vendor/facebook.js');

However I get the following error:

ERROR in ./src/components/layout/header/FacebookButtonComponent.js Module not found: Error: Cannot resolve 'file' or 'directory' /myapp/src/vendor/facebook.js in /myapp/src/components/layout/header

Maybe I'm going about this the wrong way, but it seems to be building the correct path. How am I supposed to be formatting my path if this isn't correct?

I've also tried ./ which gives:

ERROR in ./src/components/layout/header/FacebookButtonComponent.js Module not found: Error: Cannot resolve 'file' or 'directory' ./vendor/facebook.js in myapp/src/components/layout/header

And ../s to build a relative path, which seems to have no effect:

ERROR in ./src/components/layout/header/FacebookButtonComponent.js Module not found: Error: Cannot resolve 'file' or 'directory' ../vendor/facebook.js in myapp/src/components/layout/header

This question seems somewhat relevant but none of the suggestions there seemed to work (e.g. setting root.)

Answer 1

You can define resolve.modulesDirectories instead of alias:

resolve: {
  extensions: [
    '',
    '.js',
    '.jsx'
  ],
  modulesDirectories: [
    "node_modules",
    "src"
  ]
}

And require files as it is now:

require('vendor/facebook.js');

Answer 2

In your file tree you got

FacebookComponent.js

And your error says

FacebookButtonComponent.js

Answer 3

Just by reading the errors i think require('../../../vendor/facebook.js') should work.

---

require('vendor/facebook.js');

ERROR in ./src/components/layout/header/FacebookButtonComponent.js Module not found: Error: Cannot resolve 'file' or 'directory' /myapp/src/vendor/facebook.js in /myapp/src/components/layout/header Maybe I'm going about

=> trying to resolve /myapp/src/components/layout/header/myapp/src/vendor/facebook.js

---

require('./vendor/facebook.js');

ERROR in ./src/components/layout/header/FacebookButtonComponent.js Module not found: Error: Cannot resolve 'file' or 'directory' ./vendor/facebook.js in myapp/src/components/layout/header

=> trying to resolve /myapp/src/components/layout/header/vendor/facebook.js

---

require('../vendor/facebook.js');

ERROR in ./src/components/layout/header/FacebookButtonComponent.js Module not found: Error: Cannot resolve 'file' or 'directory' ../vendor/facebook.js in myapp/src/components/layout/header

=> trying to resolve myapp/src/components/layout/vendor/facebbok.js