Merge pull request #4535 from storybooks/tmeasday/fix-sb-init-vue-cli

Fix issue with `sb init` on the Vue CLI
storybookjs · Oct 25, 2018 · e2a83b0 · e2a83b0
2 parents d7bbaeb + 9715b34
commit e2a83b0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js
@@ -1,14 +1,29 @@
 import mergeDirs from 'merge-dirs';
 import path from 'path';
-import { getVersions, getPackageJson, writePackageJson, installBabel } from '../../lib/helpers';
+import {
+  getVersions,
+  getPackageJson,
+  writePackageJson,
+  installBabel,
+  addToDevDependenciesIfNotPresent,
+} from '../../lib/helpers';
 
 export default async npmOptions => {
-  const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    addonsVersion,
+    babelPresetVersion,
+    babelCoreVersion,
+  ] = await getVersions(
     npmOptions,
     '@storybook/vue',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addons'
+    '@storybook/addons',
+    'babel-preset-vue',
+    '@babel/core'
   );
 
   mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
@@ -22,6 +37,18 @@ export default async npmOptions => {
   packageJson.devDependencies['@storybook/addon-links'] = linksVersion;
   packageJson.devDependencies['@storybook/addons'] = addonsVersion;
 
+  // We should probably just not even be using this directly, see: https://github.com/storybooks/storybook/issues/4475#issuecomment-432141296
+  addToDevDependenciesIfNotPresent(packageJson, 'babel-preset-vue', babelPresetVersion);
+
+  const packageBabelCoreVersion =
+    packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
+
+  // This seems to be the version installed by the Vue CLI, and it is not handled by
+  // installBabel below. For some reason it leads to the wrong version of @babel/core (a beta)
+  // being installed
+  if (packageBabelCoreVersion === '7.0.0-bridge.0') {
+    addToDevDependenciesIfNotPresent(packageJson, '@babel/core', babelCoreVersion);
+  }
   await installBabel(npmOptions, packageJson);
 
   packageJson.scripts = packageJson.scripts || {};

diff --git a/lib/cli/lib/helpers.js b/lib/cli/lib/helpers.js
@@ -150,7 +150,7 @@ export function paddedLog(message) {
 
 export function getChars(char, amount) {
   let line = '';
-  for (let lc = 0; lc < amount; lc++) { // eslint-disable-line
+  for (let lc = 0; lc < amount; lc += 1) {
     line += char;
   }
 
@@ -227,3 +227,9 @@ export async function installBabel(npmOptions, packageJson) {
     );
   }
 }
+
+export function addToDevDependenciesIfNotPresent(packageJson, name, packageVersion) {
+  if (!packageJson.dependencies[name] && !packageJson.devDependencies[name]) {
+    packageJson.devDependencies[name] = packageVersion;
+  }
+}