Watch breaks after finding an error in compiling (related to vue-loader)

[eldair]

Hello,

When running Gulp watch with webpack task (and vue included) the script will break if there is an error in the file. It continues the execution after the error is removed and file saved again but it is not compiled correctly, getting the following error in console:

search-links.vue?f723:2Uncaught Error: Cannot find module "!!babel-loader!./../../../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./search-links.vue"

[SethTompkins]

I am also seeing this issue, I think it is webpack-stream related: https://github.com/shama/webpack-stream/issues/34

[JeffreyWay]

This has been fixed.

[jeroennoten]

Not for me...

[jeroennoten]

Also, when I use Vueify with Elixir 6 it does compile fine after a syntax error, however it only shows [08:19:11] 334229 bytes written (0.10 seconds) in the console, not the cool fancy table output that is normally displayed. Not a big deal though. In Laravel Elixir 5. it works as expected, it shows the 'nice' output (although it is not a table of course).

So for me:

• Elixir 6 + webpack = bad
• Elixir 6 + browserify/vueify = better
• Elixir 5 + browserify/vueify = best

[eldair]

Still the same

[nateajohnson]

Broken for me too

[WolfieZero]

It's not in relation to any loader, but when ever I have an error in my JS file it will stop compiling even though it says webpack is watching for changes. This happens if a file is missing or a syntax error.

Interestingly it does say You may need an appropriate loader to handle this file type so maybe related to loaders?

Has anybody tested if the same issues occur with webpack directly?

[nateajohnson]

@WolfieZero I don't ever see that message about the loader, but I get the same results when I have a syntax error. It's really frustrating because I can't just start gulp watch back up. I have to stop watching, run gulp by itself, and then restart gulp watch. If I don't run gulp alone, the browser keeps ahold of the broken javascript. It might just be time to dump elixir and run webpack stand alone. It's a shame because elixir is so convenient, but I don't think it's been tested for many scenarios.

[jeroennoten]

@nateajohnson Exactly the same for me. After a broken save, it says webpack is watching for changes each time I save again, but it does not update the compiled JavaScript file.

My (hopefully temporary) solution is using Elixir 5 with Vueify. So in my package.json I have:

    "laravel-elixir": "^5.0.0",
    "laravel-elixir-vueify": "^1.0.3",

And my gulpfile.js:

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('app.js');
});

With this configuration, after running npm install, it works for me. This does not use the latest Elixir version, but at least it works.

[nateajohnson]

@jeroennoten thanks for the config - I tried it with no luck. Unfortunately browserify never works for me because of some other dependencies I use in my project. I am going to keep looking for a webpack solution. If I find something that works, I'll post it back here.

[SethTompkins]

I mentioned this early in the thread, but this issue is not related to vueify or vue-loader, it is an issue with the webpack-stream package that is used to adapt webpack to a gulp/stream-based environment.

Here is the issue covering the error in the webpack-stream repo: https://github.com/shama/webpack-stream/issues/34

Until this is resolved in that package, laravel-elixir-webpack-official will have the same problem.

[nateajohnson]

@SethTompkins thanks for pointing that out. I must have missed your response above.

I just finished writing a stand-alone webpack configuration and it works great, which reaffirms it's an issue with trying to make webpack work in gulp's streaming workflow.

Now if I can get webpack HMR working as well, I will be really happy.

[SethTompkins]

Glad I could be of help :)

I also wrote my own webpack config after running into this issue, the main problem with using webpack-dev-server and HMR with a laravel-based site is that the dev-server is written to use specifically with pure-frontend setups. Using a backend api is easy with the proxy config, however using a traditional backend-rendered site with some react components (or other framework) on top is significantly harder.

webpack-dev-server serves all assets from an in-memory store - this means that you cannot access them from your backend's address.

There are two options that I found:

• Have a utility that changes the host for all of your webpack-served assets to the address for the dev server when in a development environment
• Use something like https://www.npmjs.com/package/browser-sync-webpack-plugin to handle css injection and page refreshing on JS compilation in your dev environment

I chose the latter option as it kept me from having to wire up special code to change hosts for my assets in different environments.

[nateajohnson]

You've just described what I have been struggling with for some time. Browsersync is nice but you lose the state of your app and have to navigate to where you were before the refresh and repopulate forms, etc. I'm preaching to the choir here :)

[jeroennoten]

I found the root of the issue in webpack-stream. See https://github.com/shama/webpack-stream/issues/34#issuecomment-244534449 for a detailed description. When PR https://github.com/shama/webpack-stream/pull/126 is merged, the problem should be solved.

[jeroennoten]

Or, if you don't want to wait, you can run

npm install "jeroennoten/webpack-stream#patch-1" --save-dev

And everything works while watching.

[LasseRafn]

I can't even get Webpack to watch at all. Simply says "webpack is watching for changes" on change, but does nothing.. Seems like a config error (according to Webpack troubleshooting) - Any ideas?

Maybe this should be in a different issue by itself?

[pmall]

Awesome @jeroennoten , this fixed the problem, many thanks. Hope this fix will be merged in the webpack-stream package soon.

[angganegara]

Thanks @jeroennoten , this fixed the issue for me. I don't have to manually gulp watch again. cheers

[JeffreyWay]

It's driving me nuts that they won't merge that PR.

@jeroennoten - I'm going to depend on your forked repo, until they fix it. Can't wait any longer. Once they merge your PR, we'll switch back.

[jeroennoten]

Yeah it's annoying.. Maybe we should contact the maintainer via e-mail or something. There has not been any activity on the repo since 6 months.

[jcorry]

This isn't working for me at all.

Repeatedly, with different versions of node/npm, I get:

npm ERR! Darwin 16.0.0
npm ERR! argv "/opt/local/bin/node" "/opt/local/bin/npm" "install"
npm ERR! node v4.6.1
npm ERR! npm  v3.10.8

npm ERR! Unsupported URL Type: github:jeroennoten/webpack-stream#patch-1
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/jcorry/workspace/connectfour/npm-debug.log

when I try to npm install after a fresh laravel project is created.

[benbjurstrom]

@jcorry I had the exact same error caused by an outdated version of npm. Upgraded from 2.x.x to 3.10.9 and the error went away.