Sitecore JSS error when creating quick start app with Vue template

Question

I'm trying to create a disconnected JSS vue app using the quick start guide, by running the following commands:

npm install -g @sitecore-jss/sitecore-jss-cli
jss create jss-app-vue vue
cd jss-app-vue
jss start

When I run the jss start command I get the following error:

Watching for changes to component factory sources in src/components...
INFO  Starting development server...
Enabling Babel 7 transpilation for the manifest...
ReferenceError: Unknown option: .caller. Check out 
http://babeljs.io/docs/usage/options/ for more information about options.
at buildUnknownError (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\validation\options.js:113:11)
at Object.keys.forEach.key (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\validation\options.js:99:57)
at Array.forEach (<anonymous>)
at validate (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\validation\options.js:69:21)
at loadPrivatePartialConfig (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\partial.js:38:50)
at loadFullConfig (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\full.js:43:39)
at loadOptions (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\index.js:28:36)
at OptionManager.init (E:\Projects\jss-app-vue\node_modules\@babel\core\lib\config\index.js:34:12)
at compile (E:\Projects\jss-app-vue\node_modules\@babel\register\lib\node.js:61:42)
at compileHook (E:\Projects\jss-app-vue\node_modules\@babel\register\lib\node.js:102:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jss-app-vue@9.0.6 start:proxy: `node scripts/disconnected-mode-proxy.js` npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jss-app-vue@9.0.6 start:proxy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

It appears there's an issue running the start:proxy command.

NOTE: This only appears to affect the vue template. The issue doesn't occur if I create an app using the react template.

Are there any additional steps required to setup an app with the vue template?

For info I'm running node v8.11.3 and npm v5.6.0.

Thanks!

Answer 1

This is likely due to a breaking change in one of the Vue sample's dependencies.

If you don't have yarn installed, the jss create command will use npm install when installing the sample (and dependencies). Unfortunately, using npm install does not respect the yarn.lock file in the Vue sample. Therefore, the dependencies for the Vue sample aren't guaranteed to be the correct version because npm will follow the version ranges from package.json.

This is already fixed for the JSS GA release, where we've switched all the samples to use npm instead of yarn.

In the interim, the easiest way to fix this would be to install yarn https://yarnpkg.com/en/docs/install. Then run the jss create jss-app-vue vue command again.