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.)

can you try to add an empty package.json file inside vendor directory :P — Fareed Alnamrouti, Jul 13 '16 at 15:32
any update on this? I'm currently having a similar issue. It seems as though webpack is trying to resolve files from the location of the file that's calling the `require` rather than the root of the project. — a_dreb, Jul 27 '16 at 23:22
If I remember correctly, I think I had some really dumb typo or mismatching class name... I'm not entirely sure. — David Elner, Jul 28 '16 at 19:15

score 1 · Answer 1 · answered Mar 25 '16 at 09:49

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');

answered Mar 25 '16 at 09:49

Bob Sponge

4,708
1
23
25

The error output I listed above is the full error output. – David Elner Mar 25 '16 at 21:46
Then provide webpack config. Looks like you add `vendor` folder to ignore path. – Bob Sponge Mar 26 '16 at 07:46

score 0 · Answer 2 · answered Mar 25 '16 at 10:02

0

In your file tree you got

FacebookComponent.js

And your error says

FacebookButtonComponent.js

answered Mar 25 '16 at 10:02

RMontes13

2,138
3
16
23

My mistake, it's actually `FacebookButtonComponent`. Updated the file structure above. Error is still the same. – David Elner Mar 25 '16 at 10:20

score 0 · Answer 3 · answered Aug 23 '16 at 21:21

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

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

3 Answers3