Getting NPM error: chmod no such file or directory error.
Maybe related to: npm/npm#9633

i added a script tag to App.vue; hot reloading fails with:

Root or manually mounted instance modified. Full reload required.

could we have an example where we can immediately test out hot reloading?

If I start with a new node install, 7.1.0 for example:
nvm install node
Install yarn first:
npm -g install yarn
and install vbuild using yarn:
yarn global add vbuild

now inside a project, try to run using:
vbuild --dev

ERROR in multi client
Module not found: Error: Can't resolve 'babel' in '/Users/neves/Documents/git/paliari-e-city-nfe'
 @ multi client

ERROR in (webpack)-hot-middleware/client-overlay.js
Module not found: Error: Can't resolve 'ansi-html' in '/Users/neves/.config/yarn/global/node_modules/webpack-hot-middleware'
 @ (webpack)-hot-middleware/client-overlay.js 25:15-35
 @ (webpack)-hot-middleware/client.js?reload=true
 @ multi client

ERROR in (webpack)-hot-middleware/client-overlay.js
Module not found: Error: Can't resolve 'html-entities' in '/Users/neves/.config/yarn/global/node_modules/webpack-hot-middleware'
 @ (webpack)-hot-middleware/client-overlay.js 40:15-39
 @ (webpack)-hot-middleware/client.js?reload=true
 @ multi client

Now if I install vbuild using npm, it works:
npm -g install vbuild
vbuild --dev

How do I use mergeConfig option to add the following for loading jQuery globally?

plugins = [
new webpack.providePlugin({
jQuery: "jquery",
"$": "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
})
]

vbuild 3.1.3

1. generate initial project from default template
2. run vbuild
   dist/vendor.11172a5f.js
3. make small change to App.vue
4. run vbuild
   dist/vendor.50964e69.js

shouldn't the vendor file stay the same between builds? from what I understand we add the hash for cache purposes which is undermined if the hash changes every build.

because it sometimes raises a vue-template-compiler version mismatches issue.

would be nice to have start-up template with a sample of custom HTML+CSS+JS, it can be created as a command of vbuild (like vbuild init) or as a template in vuejs-templates

Similar to create-react-app project

It is not obvious what should be in custom html template, how to bundle CSS and include static assets

The aim is to quick start a project using vue-cli and vbuild together:

$ vue-cli init egoist/vv my-project
$ cd my-project
$ npm install
# this script implicitly runs `vbuild -d`
$ npm run dev
# and this scripts run `vbuild`, which means build for production
$ npm run build

Hi there,
thanks for this awesome starting point to create vue apps. I'm trying it out right now and so far I love it.

I was just trying to use bulma. Although I can include scss files, @importing the framework drops this error

ERROR in /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!./src/assets/styles/app.scss
Module not found: Error: Can't resolve './bulma' in '/Users/sumitkumar/Projects/car2go-autobook/src/assets/styles'
 @ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!./src/assets/styles/app.scss 3:10-140
 @ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/style-rewriter.js?id=data-v-739eacbf!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/App.vue
 @ /Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-style-loader!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/css-loader?sourceMap!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/style-rewriter.js?id=data-v-739eacbf!/Users/sumitkumar/.nvm/versions/node/v6.8.1/lib/~/vbuild/~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/App.vue
 @ ./src/components/App.vue
 @ ./src/app.js
 @ ./src/index.js
 @ multi client

I couldn't find a clear documentation of how to properly include css/scss frameworks or even my own files as there are no example files included (just the CSS in the vue component).

Any help on how you intended to do this is much appreciated.

It is annoying to have to say "yes" every time I load up the dev server. In my setup port 4000 is always taken. I just would like to specify which port vbuild uses for the dev server.

In some places it is unclear which files certain code should be placed in. One example is the first code block in the "Server Bundle" page, which references this:

externals: Object.keys(require('./package.json').dependencies)

externals isn't documented in the config and it errors if i use it there, but the other two fields are in config. I'm not sure what this block is telling me to do.

Hi (me again 😉)

greenkeeper is telling me 4.1.4 broke my build.

The problem is this commit: ef2e078

Broken build output: https://travis-ci.org/INTECH-RGBH/homie-dashboard/jobs/178998122#L400

The problematic code is:

<style lang="sass" scoped>
  .image {
    margin: auto;
    margin-bottom: 10px;
  }
</style>

Thanks!

Just installed vbuild globally from master, created a project via vbuild init foo.
Now, when running npm run dev and then changing eg src/components/App.vue will not update the page in the browser.

Console logs however get pushed via HMR(including [HMR] Nothing hot updated., though), but there's just no update in the rendered DOM.

Try eg changing text-align: center; -> text-align: left; in App.vueto reproduce

People may forget to install Vue and run into issues, it's easy to solve though, we still can check vue before that and throw more clear warning.

If I open the generated html, it won't work because the JS url started with '/'.

HTML opened from disk:file:///D:/Work/vue-form-generator/dist/index.html
But browser want to load js from:
file:///D:/assets/bundle.cc2a07533dc5e3026dc8.js Failed to load resource: net::ERR_FILE_NOT_FOUND

Because the url in the html is: /assets/bundle.cc2a07533dc5e3026dc8.js

vbuild 4.11, on a fresh init:

$ vbuild --dev

> draft is running at http://localhost:4000

> Mode           Hot Reloading, IIFE
> Entry[client]  src/index.js, /usr/local/lib/node_modules/vbuild/node_modules/webpack-hot-middleware/client.js?reload=true
> Output         ~/src/test/draft/dist/[name].js
> Config         ~/src/test/draft/vue.config.js
> Port           4000
> Devtool        eval-source-map

ERROR in ./src/components/App.vue
Module build failed: Error:

Vue packages version mismatch:

- [email protected]
- [email protected]

ERROR in ./src/components/App.vue
Module build failed: Error:

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for
both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/usr/local/lib/node_modules/vbuild/node_modules/vue-template-compiler/index.js:8:9)
    at Module._compile (module.js:571:32)
    at Module._compile (/usr/local/lib/node_modules/vbuild/node_modules/source-map-support/source-map-support.js:471:25)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/vbuild/node_modules/vue-loader/lib/parser.js:1:16)
    at Module._compile (module.js:571:32)
    at Module._compile (/usr/local/lib/node_modules/vbuild/node_modules/source-map-support/source-map-support.js:471:25)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/vbuild/node_modules/vue-loader/lib/loader.js:3:13)
    at Module._compile (module.js:571:32)
    at Module._compile (/usr/local/lib/node_modules/vbuild/node_modules/source-map-support/source-map-support.js:471:25)
    at Object.Module._extensions..js (module.js:580:10)
 @ ./src/app.js 3:0-37
 @ ./src/index.js
 @ multi client
Child html-webpack-plugin for "index.html":

[16:33:19] Failed in 75 ms

I am trying to use the lang attribute in my style declaration for scss.

I installed node-sass and sass-loader I added the loader to mergeConfig like so:

module.exports = {
  title: 'myapp',
  resolve: true,
  live: true,
  mergeConfig: {
    // following options will be merged
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loaders: ["sass"]
        }
      ]
    }
  }
}

But I'm getting an error:

Module not found: Error: Can't resolve 'scss' in '.../src/components/'
@ ./src/components/Input.vue 5:0-166

My vue file style declaration looks like this:

...

<style lang="scss">
$prime-color: blue;

.input { color: $prime-color; }
</style>

The default script tag generated in dev is:
<script src=http://localhost:4000/client.js></script>
But that doesn't work when accessing from my phone, for example.
How can I convert to:
<script src=/client.js></script>

Even if there are 20 tabs open, when the dev server is exited from the command line the browser gets closed. Happening on Chrome on Linux. open: true in config.

I just installed vbuild with the starter kit for electron.

i ran vbuild --electron --watch -e main.js and also tries vbuild --electron --dev -e main.js but its not really doing anything other than compiling.

Am i doing this wrong or is there a beter way?

When you build out the webpack config you're using this...

webpackConfig.resolve.alias = {
      src: _.cwd(srcPath),
      components: _.cwd(srcPath, 'components'),
      store: _.cwd(srcPath, 'vuex', 'store.js'),
      css: _.cwd(srcPath, 'css'),
      views: _.cwd(srcPath, 'views')
    }

That assumes a lot about someone's directory structure. It's also notably missing router. Regardless, my advice would be to instead do the following.

webpackConfig.resolve.modules.push(_.cwd(srcPath)

In general, gives a more robust way of configuring imports without going through the dot slash hell. It makes it where anything in the src directory can be directly imported as opposed to only the things that are explicitly aliased.

Writing <style lang='sass'> created an error. Couldn't find anything in the guide about it

Currently the workflow is:

in dev mode:

• create an electron entry js file
• create an index.html and load it in electron entry file, the index.html would include:

<script src="http://localhost:4000/client.js"></script>

• run vbuild --dev --electron for your web app
• run electron /your/entry/file.js for your electron app

in production mode:

• create an electron entry js file (same as above)
• load ./dist/index.html in electron entry file
• run vbuild to build your web app to ./dist
• package the electron app and done

I'm finding a way to simplify this.

Changing the dist target does not work. In my vbuild config, I set the dist option to something like:

dist: path.join(__dirname, 'dist', 'sub-folder'),

Then, the html index file that is generated has a hardcoded payload like this:

<html><head></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">{"statusCode":404,"error":"Not Found"}</pre></body></html>

Any hint? I'm looking at that and will report back any finding I make.

I first installed vbuild on Friday. The setup I have currently worked at that time. After updating to the latest (2.2.0) my build is now failing.

It looks like it's due to failing to find items internally in vbuild... seems strange to me. Has anyone noticed anything similar or know what may be causing the issue?

> [email protected] dev /Users/<user>/Git/vue-prototype
> vbuild --dev --lint

> vbuild is running at http://localhost:4000

> Mode      Hot Reloading, IIFE
> Entry[0]  src/index.js
> Entry[1]  ~/Git/vue-prototype/node_modules/vbuild/node_modules/webpack-hot-middleware/client
> Output    ~/Git/vue-prototype/dist/[name].js
> Config    ~/Git/vue-prototype/vue.config.json
> Port      4000
> Devtool   eval-source-map

webpack: wait until bundle finished: /
webpack built 1c75320386ad96fb425c in 985ms
Hash: 1c75320386ad96fb425c
Version: webpack 2.1.0-beta.22
Time: 985ms
    Asset     Size  Chunks       Chunk Names
client.js  28.6 kB       0       client

ERROR in multi client
Module not found: Error: Can't resolve '/Users/<user>/Git/vue-prototype/node_modules/vbuild/node_modules/webpack-hot-middleware/client' in '/Users/<user>/Git/vue-prototype'
 @ multi client

ERROR in ./src/index.js
Module build failed: Error: Cannot read config file: /Users/<user>/Git/vue-prototype/node_modules/vbuild/node_modules/eslint-config-egoist-vue/index.js
Error: Cannot find module '/Users/<user>/Git/vue-prototype/node_modules/vbuild/node_modules/eslint-config-egoist-vue/index.js'
    at Function.Module._resolveFilename (module.js:339:15)
    at module.exports (/Users/<user>/Git/vue-prototype/node_modules/resolve-from/index.js:14:16)
    at module.exports (/Users/<user>/Git/vue-prototype/node_modules/require-uncached/index.js:11:17)
    at loadJSConfigFile (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config/config-file.js:160:16)
    at loadConfigFile (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config/config-file.js:199:22)
    at Object.load (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config/config-file.js:498:18)
    at loadConfig (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config.js:63:33)
    at new Config (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/config.js:228:38)
    at CLIEngine.executeOnText (/Users/<user>/Git/vue-prototype/node_modules/eslint/lib/cli-engine.js:736:28)
    at lint (/Users/<user>/Git/vue-prototype/node_modules/eslint-loader/index.js:42:18)
    at Object.module.exports (/Users/<user>/Git/vue-prototype/node_modules/eslint-loader/index.js:166:3)
 @ multi client
webpack: bundle is now VALID.

Currently your lint rule set is the only one usable. It'd be nice if we could provide our on eslint file and have it use that. Maybe by specifying a path to it?

There's a big benefit of having an eslint file in the root. It allows editors or IDEs to use it while editing.

vue-cli is good, but vue init egoist/vbuild-simple my-project is too long to type

Not only good for unit testing web apps, but for testing vue related libraries, such as filter, component.

This package relies on the merge webpack config feature.

Usage:

// vue.config.js
module.exports = {
  mergeConfig: [
    require('vbuild-addons')
  ]
}

Hopefully it will at least cover these removed features: #30

Could use something like https://github.com/xudafeng/detect-port

I just made another component https://github.com/egoist/vue-slim-modal and configure jest once again. We need vbuild test now!

I feel pretty dumb to ask that, but how do we add a favicon.ico?

The installation was successful using npm but failed when I attempted to use yarn (prior to installing via npm).

System is Windows 10, Node version 6.9.2. The error generated was:

error An unexpected error occurred: "ENOENT: no such file or directory, open 'C:\Users\{me}\AppData\Local\Yarn\config\global\node_modules\@sindresorhus\df\index.js'".

This was the first time I've ever (attempted) to use yarn but the command was entered exactly asd listed in the vbuild docs (i.e. yarn global add vbuild).

Otherwise, I'm looking forward to checking out this great looking Vue tool.

There should be a way to merge webpack config, maybe like --merge-config my-webpack-config.js

https://github.com/survivejs/webpack-merge might be useful for merging loaders.

Just upgraded and had probs running my builds:

  TypeError: Cannot read property 'request' of undefined
  
  - ExternalModuleFactoryPlugin.js:37 handleExternals
    [global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:33
  
  - ExternalModuleFactoryPlugin.js:46 next
    [global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8
  
  - ExternalModuleFactoryPlugin.js:59 handleExternals
    [global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7
  
  - ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.
    [global]/[html-webpack-plugin]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5
  
  - NormalModuleFactory.js:177 
    [global]/[webpack]/lib/NormalModuleFactory.js:177:3
  
  - Tapable.js:123 NormalModuleFactory.applyPluginsAsyncWaterfall
    [global]/[tapable]/lib/Tapable.js:123:70
  
  - NormalModuleFactory.js:161 NormalModuleFactory.create
    [global]/[webpack]/lib/NormalModuleFactory.js:161:8
  
  - Compilation.js:356 Compilation.process [as _addModuleChain]
    [global]/[webpack]/lib/Compilation.js:356:16
  
  - Compilation.js:427 Compilation.process [as addEntry]
    [global]/[webpack]/lib/Compilation.js:427:7
  
  - SingleEntryPlugin.js:22 SingleEntryPlugin.
    [global]/[html-webpack-plugin]/[webpack]/lib/SingleEntryPlugin.js:22:15
  
  - Tapable.js:156 Compiler.applyPluginsParallel
    [global]/[tapable]/lib/Tapable.js:156:14
  
  - Compiler.js:431 Compiler.compile
    [global]/[webpack]/lib/Compiler.js:431:7
  
  - Compiler.js:237 Compiler.runAsChild
    [global]/[webpack]/lib/Compiler.js:237:7
  
  - compiler.js:70 
    [global]/[html-webpack-plugin]/lib/compiler.js:70:19

pinning the html webpack plug to a more recent version solved it for me:
yarn add --dev [email protected]

This works vbuild --dev -c vbuild.js while this doesn't vbuild --dev

export default {
  babel(config) {
    return {...config, plugins: ['new-plugin']}
  },
  postcss(config) {
    return [...config, myPostcssPlugin()]
  },
  webpack(config) {
    return {...config, devtool: false}
  }
}

The main idea is to use the same way to update these configs, they take the original config as the argument and return the new config.

Could follow https://facebook.github.io/jest/docs/tutorial-webpack.html, a more seamless integration between vbuild and jest would be great.

Currently using [email protected]

Webpack 2 and its docs are very close now, thinking about upgrading to use webpack 2 latest. PRs and discussions are welcome 😅

not sure if that should be vbuild issue

yarn keeps exiting with an error "cannot find @sindresorhus\df\index.js"
npm works fine

detailed log:

yarn install v0.15.1
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
warning [email protected]: The engine "rhino" appears to be invalid.
[3/4] Linking dependencies...
error ENOENT: no such file or directory, open 'D:\Projects\vue-bootstrap-ui\node_modules@sindresorhus\df\index.js'
at Error (native)
info Visit http://yarnpkg.com/en/docs/cli/install for documentation about this command.

It seems process.stdout.clearLine is undefined when the build step is used on a CI without tty, causing the build to fail (see this build for example).

Is it possible to run eslint on its own to check code in src without being part of vbuild prod?

Here's the generated package.json

{
  "private": true,
  "name": "<project>",
  "scripts": {
    "dev": "vbuild --dev",
    "build": "vbuild"
  }
 }
}

Notice the extra closing brace.

I'm trying to use vbuild and I have my stylesheets with less, but I'm getting this error

As you can see, I'm trying to import normalize. I've use Vue with less before with browserify and it works perfect, but I've never used webpack before. I'm including my styles in my main vue file like this

<style lang="less" src="./style/main.less"></style>

I try to add some webpack loaders for less and for sourcemap but the error is still there. Is there something I'm missing? Here is my vbuils.js file if it helps

import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

export default {
  // ...
  postcss: ['postcss-import'],
  webpack(config, options) {
    config.resolve.devtool = 'source-map'
    addLess(config)
    config.resolve.plugins = [ new ExtractTextPlugin('styles.css') ]
    setAlias(config)
  }
}

function cwd(...args) {
  return path.join(process.cwd(), ...args)
}

function setAlias(config) {
  config.resolve.alias = {
    components: cwd('src/components'),
    utils: cwd('src/utils'),
    helpers: cwd('src/helpers')
  }
}

function addLess(config) {
  config.resolve.module = {
    loaders: [
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(
          // activate source maps via loader query
          'css?sourceMap!' +
          'less?sourceMap'
        )
      }
    ]
  }
}

This would be useful to work with some API endpoint.

https://github.com/chimurai/http-proxy-middleware

{
  "proxy": {
    "/api": "https://some.api.endpoint.com"
  }
}

To use vue.config.json instead of vbuild.js so that it can be ported into a vue-cli template.

But the limitation is that we cannot benefit from javascript anymore, since it's plain json. But yet when your project goes to require more customizations, you are recommended to vbuild --eject instead.

If the output format is umd or cjs the vendor thunk should be removed by default.

Hi there, I'm getting this with the default project after running vbuild init my-project and npm run dev

[Vue warn]: Cannot find element: #app

Hi there,

I tried vbuild out and really liked it. This kind of "no config just build" experience is really cool. I remember seeing a suggestion somewhere of pulling this into vuejs organization, but there are some ideas I want to discuss.

The way it works currently has overlapping functionality with vue-cli. The difference is the tradeoff between user experience and configurability. vbuild is very very nice for quick prototyping, however in production, almost every user will have different needs, so a pre-configured build tool has limited flexibility in production use.

My hope is that we can fold vbuild into vue-cli as a new command: vue build, and give it a more clearly defined goal: making prototyping Vue apps super super easy. So:

• if a user wants to build a production app, use vue init;
• if a user wants to quickly prototype an idea, use vue build --dev (and in most cases can later just copy the src files into a production scaffold generated with vue init)

By focusing on prototyping we can worry less about production problems, and provide more user experience improvements:

• use a lighter weight ES2015 transpiler e.g. buble
• support directly building a *.vue file, e.g. vue build App.vue and boom
• auto-infer the npm dependencies in the files and npm install them automatically

If you are interested in this idea, I'd love to have you join the team and work on this feature. What do you think?