extract-text-webpack-plugin fails to resolve on Fedora during npm run build about webpack

[oaleynik]

@yyx990803 @chrisvfritz @funkyLover https://github.com/vuejs/vue-loader/blob/master/lib/loader.js#L14 - this regex matches html word. So, if project path contains html word somewhere - https://github.com/vuejs/vue-loader/blob/master/lib/loader.js#L99 will separate path with bang right after the html word

[chrisvfritz]

I'll try to reproduce and fix this in the next few days on my Linux box.

[yyx990803]

@chrisvfritz awesome, thanks in advance! :D

[chrisvfritz]

@yyx990803 Wasn't able to reproduce this, unfortunately.

• ubuntu 15.10 64-bit
• linux 4.2.0-16-generic
• npm 3.7.3
• node 5.8.0

I'm happy to dig in further though, with more information about the systems this fails on.

[cnicodeme]

I don't have much experience on Webpack but since I'm having this issue I can help.
I'm running Fedora 22, with Node v5.3.0 and NPM v3.3.12 and I'm having the following issue :

Uncaught Error: Cannot find module "-!./../../../../..!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../../../../../../project/manager/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!vue-style-loader!css-loader!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./login.vue"

If you need more info, I'll be happy to provide them :)

[chrisvfritz]

Thanks @cnicodeme! 😃 I'll try to replicate this in a Docker container and see what happens. In the meantime though - can you try deleting the extract-text-webpack-plugin in your node_modules, then re-running npm install? Knowing if that fixes the problem could be useful.

[cnicodeme]

For information, I'm working on my project on two different computer, the second one is an Ubuntu installation :

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 14.04.2 LTS
Release:        14.04
Codename:       trusty

And the npm run build works correctly.
On that computer, here's the different versions :

$ node -v
v4.1.1
$ npm -v
v2.14.4

[cnicodeme]

(I wrongly posted this in the old tickets, so I'm copying it here) :

Hi tested something on my installation :

I initiated a new project using vue-cli and webpack, and did npm install && npm run build and I got this error :

ERROR in ./src/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../test/node_modules/extract-text-webpack-plugin/loader.js in /var/www/html/test/src
@ ./src/App.vue 2:0-321
Child html-webpack-plugin for "../index.html":

I had this issue without modifying anything.

Maybe that would help, but despite the fact that I've installed vue-cli as root using npm install -g vue-cli, I don't have any vue command in my $PATH so I did the following :

/opt/node/5.3.0/lib/node_modules/vue-cli/bin/vue init webpack test

And odly, it correspond to the number of .. in the above error message.
Hoping that this could help! :)

[cnicodeme]

(I wrongly posted this in the old tickets, so I'm copying it here) :

I updated Node & NPM :

$ node -v
v5.8.0
$ npm -v
3.8.1

And retried a build on my app, without any luck. The problem remain.

[cnicodeme]

Since I tested a fresh installation on vuejs, I seriously doubt removing the extract-text-webpack-plugin in node_modules will fix the issue, but to be sure, I'll try.

...

And it did not fixed the issue, unfortunately.
I'll see if I can find more details, but for now, I'd say it's related to Fedora

[chrisvfritz]

@cnicodeme Wow, that's great information and should definitely help narrow it down! I'll let you know if I'm still not able to reproduce it or have any other questions.

[cnicodeme]

Feel free to ask, I'm concerned about this problem :)

I'm sorry I can be of much help regarding the package in question, I'm quite new to Node and I couldn't narrow where the problem is in extract-text-webpack-plugin.

[chrisvfritz]

No worries - you've already been a huge help!

[chrisvfritz]

Darn, I'm still having difficulty reproducing this, even on Fedora. 😕 I've run out of ideas currently, but I'll leave this open to see if someone else might be able to find a solution. @cnicodeme Thank you again for all your help narrowing it down! If you haven't already, I'd also open an issue in extract-text-webpack-plugin, now that we have more information.

[cipas]

same issue as @cnicodeme

[chrisvfritz]

@cipas @cnicodeme I'd open an issue in extract-text-webpack-plugin detailing your issue. If you find a solution to your problem, please let us know back here!

[pratyushbarik]

The error seems to occur due to

if (options.extract) {
  return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
} else {
  return ['vue-style-loader', sourceLoader].join('!')
}

in css-loaders.js.
Specifically in return ExtractTextPlugin.extract('vue-style-loader', sourceLoader).
Without it npm run build executes without any issues. If you set extract to false in webpack.base.conf.js, it works fine.

I am on eOS Freya.

[chrisvfritz]

@pratyushbarik Thanks for adding new information. If you happen to find a way to get the plugin to work without disabling it, please do post back here. 😃

[funkyLover]

@chrisvfritz same issue, and unfortunately, on OSX El Capitan 10.11.4

~ node -v
v4.4.0
~ npm -v
3.8.2

but someting weird
I have tried create two project with vue-cli
vue init webpack haha & vue init webpack html
and within project haha

npm install
npm run build

it work fine!
but in project html, it will get error

ERROR in ./src/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../node_modules/extract-text-webpack-plugin/loader.js in /Users/funkyLover/Desktop/html/src
 @ ./src/App.vue 2:0-294

ERROR in ./src/components/Hello.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../.. in /Users/funkyLover/Desktop/html/src/components
 @ ./src/components/Hello.vue 2:0-335

is it possible caused by the folder name? 😂

[funkyLover]

i find out all the error report have html with their project path 😂
issue by @sunny-rajkotiya
issue by @cnicodeme
issue by @voigt
issue by @2eron

and i try vue init webpack haha in a html folder and npm run build

the error again 😂

[yyx990803]

Wow, we're on to something, finally
On Fri, Apr 8, 2016 at 4:32 AM Joseph [email protected] wrote:

i find out all the error report have html with their project path 😂
issue by @sunny-rajkotiya
vuejs/vue-cli#19 (comment)
issue by @cnicodeme
#41 (comment)
issue by @voigt
vuejs/vue-cli#19 (comment)
issue by @2eron
vuejs/vue-cli#19 (comment)

and i try vue init webpack haha in a html folder and npm run build

the error again 😂

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#41 (comment)

[cnicodeme]

Yeah nice! :)

[chrisvfritz]

@funkyLover, I love your funk! Thank you for putting that together like a master detective. 😄 I'll investigate this and see if I can figure out what's going on.

[yyx990803]

@oaleynik ooohhhhh ok I'll look into it!

[oaleynik]

@yyx990803 PR with fix vuejs/vue-loader#205

I didn't find a way how to compose proper regex to skip absolute paths with html and css words in it, so I went another way - I do split loader string by ! and inject rewriter into each part separately. If part contains path.sep I consider it as filesystem path and skip injection.

[yyx990803]

Thanks to everyone who helped out locating the issue! It's fixed in [email protected].

[YasuoSop]

@yyx990803 尤大大 请问iview怎么集成到asp.net项目中？