Build: Fix CRA repro generator and e2e test in PnP mode

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 executors:
-  sb_node_12_classic:
+  sb_node_14_classic:
     parameters:
       class:
         description: The Resource class
@@ -10,11 +10,11 @@ executors:
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:14
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_node_12_browsers:
+  sb_node_14_browsers:
     parameters:
       class:
         description: The Resource class
@@ -23,7 +23,7 @@ executors:
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:12-browsers
+      - image: circleci/node:14-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
@@ -79,14 +79,14 @@ jobs:
   build:
     executor:
       class: xlarge
-      name: sb_node_12_classic
+      name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
+            - build-yarn-2-cache-v2--{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: yarn install --immutable
@@ -95,7 +95,7 @@ jobs:
           command: yarn bootstrap --core
       - save_cache:
           name: Save Yarn cache
-          key: build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
+          key: build-yarn-2-cache-v2--{{ checksum "yarn.lock" }}
           paths:
             - ~/.yarn/berry/cache
       - persist_to_workspace:
@@ -107,7 +107,7 @@ jobs:
             - app
             - lib
   chromatic:
-    executor: sb_node_12_browsers
+    executor: sb_node_14_browsers
     parallelism: 4
     steps:
       # Keep using default checkout because Chromatic needs some git history to work properly
@@ -121,7 +121,7 @@ jobs:
   packtracker:
     executor:
       class: medium
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -135,7 +135,7 @@ jobs:
   examples:
     executor:
       class: medium
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
     parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -153,7 +153,7 @@ jobs:
   publish:
     executor:
       class: medium
-      name: sb_node_12_classic
+      name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -269,10 +269,16 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: run e2e tests
-          command: yarn test:e2e-framework --pnp sfcVue cra
+          command: yarn test:e2e-framework --pnp cra
+      - run:
+          name: run e2e tests
+          command: yarn test:e2e-framework --pnp sfcVue
       - store_artifacts:
           path: /tmp/cypress-record
           destination: cypress
+      - store_artifacts:
+          path: /tmp/storybook-e2e-testing
+          destination: e2e
   e2e-tests-examples:
     executor:
       class: small
@@ -298,7 +304,7 @@ jobs:
   smoke-tests:
     executor:
       class: medium
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
     environment:
       # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
       # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
@@ -356,7 +362,7 @@ jobs:
   lint:
     executor:
       class: small
-      name: sb_node_12_classic
+      name: sb_node_14_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -366,7 +372,7 @@ jobs:
           name: Lint
           command: yarn lint
   unit-tests:
-    executor: sb_node_12_browsers
+    executor: sb_node_14_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -382,7 +388,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

app/react/package.json

@@ -79,13 +79,29 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
+    "@storybook/builder-webpack4": "6.5.0-alpha.33",
+    "@storybook/builder-webpack5": "6.5.0-alpha.33",
+    "@storybook/manager-webpack4": "6.5.0-alpha.33",
+    "@storybook/manager-webpack5": "6.5.0-alpha.33",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
   "peerDependenciesMeta": {
     "@babel/core": {
       "optional": true
     },
+    "@storybook/builder-webpack4": {
+      "optional": true
+    },
+    "@storybook/builder-webpack5": {
+      "optional": true
+    },
+    "@storybook/manager-webpack4": {
+      "optional": true
+    },
+    "@storybook/manager-webpack5": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     }

lib/cli/src/generators/baseGenerator.ts

@@ -87,7 +87,7 @@ export async function baseGenerator(
   const addonPackages = [...addons, '@storybook/addon-actions'];
 
   const yarn2Dependencies =
-    packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
+    packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
 
   const files = await fse.readdir(process.cwd());
   const isNewFolder = !files.some(

lib/cli/src/initiate.ts

@@ -325,6 +325,7 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
   } catch (ex) {
     done(ex.message);
     process.exit(1);
+    return;
   }
   done();
 
@@ -333,5 +334,5 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
     ...(isEsm ? { commonJs: true } : undefined),
   });
 
-  return automigrate();
+  await automigrate();
 }

lib/cli/src/repro-generators/configs.ts

@@ -35,8 +35,21 @@ export const cra: Parameters = {
   name: 'cra',
   version: 'latest',
   generator: [
+    // hacky way to get CRA to get booted with yarn berry
+    `npm init -y`,
+    `yarn set version classic`,
+    `yarn install`,
+
+    // just some sanity checks
+    'yarn -v',
+    'pwd',
+
     // Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-    'npx create-react-app@{{version}} {{appName}} --use-npm',
+    'npx -p create-react-app@{{version}} create-react-app {{appName}}',
+
+    // cleanup after the hacky work around from above
+    'rm -rf node_modules yarn.lock package.json',
+
     'cd {{appName}}',
     'echo "FAST_REFRESH=true" > .env',
     'echo "SKIP_PREFLIGHT_CHECK=true" > .env',
@@ -49,7 +62,7 @@ export const cra_typescript: Parameters = {
   version: 'latest',
   generator: [
     // Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-    'npx create-react-app@{{version}} {{appName}} --template typescript --use-npm',
+    'npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript --use-npm',
   ].join(' && '),
 };
 
@@ -96,7 +109,7 @@ const baseAngular: Parameters = {
   framework: 'angular',
   name: 'angular',
   version: 'latest',
-  generator: `npx --package @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
+  generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
 };
 
 export const angular10: Parameters = {

lib/cli/src/repro-generators/scripts.ts

@@ -52,15 +52,17 @@ export const exec = async (
     const defaultOptions: ExecOptions = {
       silent: true,
     };
-    shell.exec(command, { ...defaultOptions, ...options }, (code, stdout, stderr) => {
+    const child = shell.exec(command, { ...defaultOptions, ...options, async: true });
+
+    child.stderr.pipe(process.stderr);
+    child.stdout.pipe(process.stdout);
+
+    child.on('exit', (code) => {
       if (code === 0) {
         resolve(undefined);
       } else {
         logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
-        logger.error(`Command output was:${chalk.yellow(`\n${stdout}\n${stderr}`)}`);
-        if (errorMessage) {
-          logger.error(errorMessage);
-        }
+        logger.log(errorMessage);
         reject(new Error(`command exited with code: ${code}: `));
       }
     });
@@ -105,6 +107,8 @@ const configureYarn2ForE2E = async ({ cwd }: Options) => {
 const generate = async ({ cwd, name, appName, version, generator }: Options) => {
   const command = generator.replace(/{{appName}}/g, appName).replace(/{{version}}/g, version);
 
+  console.log('generate', { command, generator });
+
   await exec(
     command,
     { cwd },
@@ -205,15 +209,10 @@ export const createAndInit = async (
   logger.log();
   logger.info(`🏃 Starting for ${name} ${version}`);
   logger.log();
-  logger.debug(options);
-  logger.log();
 
   await doTask(generate, { ...options, cwd: options.creationPath });
-
   await doTask(installYarn2, options);
-
   await doTask(configureYarn2ForE2E, options, e2e);
-
   await doTask(addTypescript, options, !!options.typescript);
   await doTask(addRequiredDeps, options);
   await doTask(initStorybook, options);

lib/cli/src/repro.ts

@@ -164,6 +164,7 @@ export const repro = async ({
     );
   } catch (error) {
     logger.error('🚨 Failed to create repro');
+    throw new Error(error);
   }
 };