Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cannot resolve 'file' or 'directory' webpack

See original GitHub issue

I just npm installed vue-cli and did same task as instructed npm run dev is working fine but when i do npm run build i got following error message

> vue-project@ build /var/www/html/vue-lab2/vue-project
> rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js

Hash: f8302fe592cda5dae1c2  
Version: webpack 1.12.11
Time: 2888ms
                          Asset       Size  Chunks             Chunk Names
    app.1c5e9c5cf5fc998a31b4.js    89.4 kB       0  [emitted]  app
app.1c5e9c5cf5fc998a31b4.js.map     687 kB       0  [emitted]  app
                  ../index.html  207 bytes          [emitted]  

ERROR in ./src/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../vue-lab2/vue-project/node_modules/extract-text-webpack-plugin/loader.js in /var/www/html/vue-lab2/vue-project/src
 @ ./src/App.vue 2:0-352

this is my package.json

{
  "name": "vue-project",
  "description": "This is to test basic vue structure",
  "author": "Sunny Rajkotiya <sunny.rajkotiya@knolskape.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --config build/webpack.dev.conf.js",
    "build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js",
    "test": "karma start build/karma.conf.js --single-run"
  },
  "dependencies": {
    "vue": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^5.8.0",
    "css-loader": "^0.23.0",
    "eslint": "^1.10.3",
    "eslint-friendly-formatter": "^1.2.2",
    "eslint-loader": "^1.2.0",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.4",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^1.7.0",
    "inject-loader": "^2.0.1",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.15",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-spec-reporter": "0.0.23",
    "karma-webpack": "^1.7.0",
    "phantomjs": "^1.9.19",
    "rimraf": "^2.5.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.0.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  }
}

i have npm version 3.3.12

I tried all solutions mentioned in https://github.com/vuejs/vue-loader/issues/70 ,https://github.com/webpack/webpack/issues/981, also tried adding resolve.root = resolve.path(__dirname,“node_modules”) or resolveLoader: {
root: path.join(__dirname, ‘node_modules’)
} but nothing worked

Issue Analytics

State:
Created 8 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

pdxbmwcommented, Apr 22, 2016

I was having the same issue as you @cnicodeme. I upgraded my node version, then I reinstalled the vue-cli (npm install -g vue-cli), and the vue command was recognized.

1reaction

voigtcommented, Feb 11, 2016

I have the same issue. Below you can find the webpack output with --display-error-details.

$ node_modules/rimraf/bin.js dist && node_modules/webpack/bin/webpack.js --display-error-details --progress --hide-modules --config build/webpack.prod.Hash: f72ff4065014fb6eddbc                  
Version: webpack 1.12.13
Time: 10075ms
                          Asset       Size  Chunks             Chunk Names
    app.69de1713ea9bc16860f7.js     103 kB       0  [emitted]  app
app.69de1713ea9bc16860f7.js.map     855 kB       0  [emitted]  app
                  ../index.html  183 bytes          [emitted]  

ERROR in ./src/components/ClanView.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js in /var/www/virtual/cv/html/coc_clan_visualizer_ui/src/components
resolve file
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.webpack-loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.web-loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.js doesn't exist
resolve directory
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js doesn't exist (directory default file)
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js/package.json doesn't exist (directory description file)
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.webpack-loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.web-loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.js]
 @ ./src/components/ClanView.vue 2:0-343

ERROR in ./src/components/Member.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js in /var/www/virtual/cv/html/coc_clan_visualizer_ui/src/components
resolve file
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.webpack-loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.web-loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.js doesn't exist
resolve directory
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js doesn't exist (directory default file)
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js/package.json doesn't exist (directory description file)
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.webpack-loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.web-loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.js]
 @ ./src/components/Member.vue 2:0-341

ERROR in ./src/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js in /var/www/virtual/cv/html/coc_clan_visualizer_ui/src
resolve file
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.webpack-loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.web-loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.loader.js doesn't exist
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.js doesn't exist
resolve directory
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js doesn't exist (directory default file)
  /coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js/package.json doesn't exist (directory description file)
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.webpack-loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.web-loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.loader.js]
[/coc_clan_visualizer_ui/node_modules/extract-text-webpack-plugin/loader.js.js]
 @ ./src/App.vue 2:0-326

ERROR in ./src/components/MemberView.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../.. in /var/www/virtual/cv/html/coc_clan_visualizer_ui/src/components
resolve file
  /var/www/virtual/cv/html is not a file
  /var/www/virtual/cv/html.webpack-loader.js doesn't exist
  /var/www/virtual/cv/html.web-loader.js doesn't exist
  /var/www/virtual/cv/html.loader.js doesn't exist
  /var/www/virtual/cv/html.js doesn't exist
resolve directory
  /var/www/virtual/cv/html/package.json doesn't exist (directory description file)
  directory default file index
    resolve file index in /var/www/virtual/cv/html
      /var/www/virtual/cv/html/index doesn't exist
      /var/www/virtual/cv/html/index.webpack-loader.js doesn't exist
      /var/www/virtual/cv/html/index.web-loader.js doesn't exist
      /var/www/virtual/cv/html/index.loader.js doesn't exist
      /var/www/virtual/cv/html/index.js doesn't exist
[/var/www/virtual/cv/html.webpack-loader.js]
[/var/www/virtual/cv/html.web-loader.js]
[/var/www/virtual/cv/html.loader.js]
[/var/www/virtual/cv/html.js]
[/var/www/virtual/cv/html/index]
[/var/www/virtual/cv/html/index.webpack-loader.js]
[/var/www/virtual/cv/html/index.web-loader.js]
[/var/www/virtual/cv/html/index.loader.js]
[/var/www/virtual/cv/html/index.js]
 @ ./src/components/MemberView.vue 2:0-345
Child html-webpack-plugin for "../index.html":

To me this looks like webpack/webpack-loader is looking in the wrong directories, as I’m calling npm run build from /home/cv/html/coc_clan_visualizer_ui.

Here my package.json (I added vue-async-data and vue-router).

{
  "name": "coc_ui",
  "description": "bla",
  "author": "Christoph Voigt",
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js",
    "test": "karma start build/karma.conf.js --single-run"
  },
  "dependencies": {
    "vue": "^1.0.16"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^5.8.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.23.0",
    "eslint": "^1.10.3",
    "eslint-friendly-formatter": "^1.2.2",
    "eslint-loader": "^1.2.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "inject-loader": "^2.0.1",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.15",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-spec-reporter": "0.0.23",
    "karma-webpack": "^1.7.0",
    "phantomjs-prebuilt": "^2.1.3",
    "rimraf": "^2.5.0",
    "url-loader": "^0.5.7",
    "vue-async-data":"1.0.2",
    "vue-router":"0.7.10",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.0.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  }
}

System Details:

$ cat /etc/*-release
CentOS release 6.7 (Final)
CentOS release 6.7 (Final)
CentOS release 6.7 (Final)
$ node -v
v5.1.1
$ npm -v
3.3.12

Help, hints and ideas very appreciated 😃

Top Results From Across the Web

Webpack Error - Cannot Resolve File or Directory

I found an answer in github Error : ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'#981. But sadly, in...

Module not found: Error: Cannot resolve 'file' or 'directory'

hello there is my webpack.config `var path = require('path'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractCSS ...

webpack "Module not found: Error: Cannot resolve 'file' or ' ...

It was not able to download few of the dependencies. Try running your command prompt as administrator , delete the node_module folder and ......

Module Resolution

A resolver is a library which helps in locating a module by its absolute path. A module can be required as a dependency...

False warning "Cannot resolve file" when using webpack

When I use a image from scss file in a webpack directory, there is false warning Can't resolve file "~images/logo-main-800.png" .

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

cannot resolve 'file' or 'directory' webpack

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

Prompt description and author fields have become one

`error eol-last Newline required at end of file but not found` syntax on Home.vue