fix(react): add migration to install @nrwl/webpack if needed by Story…

…book
nrwl · Jan 19, 2023 · 9b17a04 · 9b17a04
1 parent f297cb6
commit 9b17a04
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 43 deletions.
diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts
@@ -5,10 +5,7 @@ import {
   readJsonFile,
   workspaceRoot,
 } from '@nrwl/devkit';
-import {
-  composePlugins,
-  getBaseWebpackPartial,
-} from '@nrwl/webpack/src/utils/config';
+import { composePlugins } from '@nrwl/webpack/src/utils/config';
 import { NormalizedWebpackExecutorOptions } from '@nrwl/webpack/src/executors/webpack/schema';
 import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
 import { join } from 'path';
@@ -17,7 +14,6 @@ import { Configuration, DefinePlugin, WebpackPluginInstance } from 'webpack';
 import * as mergeWebpack from 'webpack-merge';
 import { mergePlugins } from './merge-plugins';
 import { withReact } from '../with-react';
-import { withNx, withWeb } from '@nrwl/webpack';
 
 // This is shamelessly taken from CRA and modified for NX use
 // https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
@@ -96,7 +92,17 @@ export const webpack = async (
   logger.info(
     '=> Loading Nrwl React Storybook preset from "@nrwl/react/plugins/storybook"'
   );
+  // In case anyone is missing dep and did not run migrations.
+  // See: https://github.com/nrwl/nx/issues/14455
+  try {
+    require.resolve('@nrwl/webpack');
+  } catch {
+    throw new Error(
+      `'@nrwl/webpack' package is not installed. Install it and try again.`
+    );
+  }
 
+  const { withNx, withWeb } = require('@nrwl/webpack');
   const tsconfigPath = join(options.configDir, 'tsconfig.json');
 
   const builderOptions: NormalizedWebpackExecutorOptions = {

diff --git a/packages/react/src/generators/component-test/component-test.spec.ts b/packages/react/src/generators/component-test/component-test.spec.ts
@@ -2,7 +2,6 @@ import { assertMinimumCypressVersion } from '@nrwl/cypress/src/utils/cypress-ver
 import { Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyV1Workspace } from '@nrwl/devkit/testing';
 import { Linter } from '@nrwl/linter';
-import enquirer = require('enquirer');
 import libraryGenerator from '../library/library';
 import { componentTestGenerator } from './component-test';
 

diff --git a/...ct/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts b/...ct/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts
@@ -12,7 +12,6 @@ import { applicationGenerator } from '../application/application';
 import { componentGenerator } from '../component/component';
 import { libraryGenerator } from '../library/library';
 import { cypressComponentConfigGenerator } from './cypress-component-configuration';
-import enquirer = require('enquirer');
 
 let projectGraph: ProjectGraph;
 jest.mock('@nrwl/devkit', () => ({

diff --git a/packages/react/src/generators/library/library.spec.ts b/packages/react/src/generators/library/library.spec.ts
@@ -11,7 +11,6 @@ import {
   createTreeWithEmptyWorkspace,
 } from '@nrwl/devkit/testing';
 import { Linter } from '@nrwl/linter';
-import enquirer = require('enquirer');
 import { nxVersion } from '../../utils/versions';
 import applicationGenerator from '../application/application';
 import libraryGenerator from './library';

diff --git a/packages/react/src/generators/stories/stories.lib.spec.ts b/packages/react/src/generators/stories/stories.lib.spec.ts
@@ -4,7 +4,6 @@ import { createTreeWithEmptyV1Workspace } from '@nrwl/devkit/testing';
 import applicationGenerator from '../application/application';
 import { Linter } from '@nrwl/linter';
 import libraryGenerator from '../library/library';
-import enquirer = require('enquirer');
 
 describe('react:stories for libraries', () => {
   let appTree: Tree;

diff --git a/packages/react/src/generators/storybook-configuration/configuration.spec.ts b/packages/react/src/generators/storybook-configuration/configuration.spec.ts
@@ -2,7 +2,6 @@ import { installedCypressVersion } from '@nrwl/cypress/src/utils/cypress-version
 import { logger, Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyV1Workspace } from '@nrwl/devkit/testing';
 import { Linter } from '@nrwl/linter';
-import enquirer = require('enquirer');
 import applicationGenerator from '../application/application';
 import componentGenerator from '../component/component';
 import libraryGenerator from '../library/library';

diff --git a/packages/storybook/migrations.json b/packages/storybook/migrations.json
@@ -59,6 +59,12 @@
       "version": "15.4.6-beta.0",
       "description": "Refactor the Storybook target options",
       "factory": "./src/migrations/update-15-4-6/refactor-executor-options"
+    },
+    "update-15-5-3": {
+      "cli": "nx",
+      "version": "15.5.3-beta.0",
+      "description": "Add @nrwl/webpack if it is missing and is used.",
+      "factory": "./src/migrations/update-15-5-3/ensure-webpack-package"
     }
   },
   "packageJsonUpdates": {

diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts
@@ -112,6 +112,9 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
       devDependencies['@babel/core'] = babelCoreVersion;
       devDependencies['@babel/preset-typescript'] =
         babelPresetTypescriptVersion;
+      if (schema.bundler === 'webpack') {
+        devDependencies['@nrwl/webpack'] = nxVersion;
+      }
     }
 
     if (schema.uiFramework === '@storybook/web-components') {

diff --git a/packages/storybook/src/migrations/update-15-5-3/ensure-webpack-package.spec.ts b/packages/storybook/src/migrations/update-15-5-3/ensure-webpack-package.spec.ts
@@ -0,0 +1,83 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import {
+  readJson,
+  writeJson,
+  addProjectConfiguration,
+  Tree,
+} from '@nrwl/devkit';
+import update from './ensure-webpack-package';
+
+describe('ensure-webpack-package', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+    writeJson(tree, 'package.json', {
+      dependencies: {},
+      devDependencies: {
+        '@nrwl/react': '15.5.0',
+      },
+    });
+  });
+
+  it.each`
+    config
+    ${'main.ts'}
+    ${'main.js'}
+  `(
+    'should install @nrwl/webpack if it is needed by React project',
+    async ({ config }) => {
+      addProjectConfiguration(tree, 'myapp', {
+        root: 'myapp',
+      });
+      tree.write(
+        `myapp/.storybook/${config}`,
+        `
+        module.exports = {
+          addons: ['@nrwl/react/plugins/storybook']
+        };
+      `
+      );
+
+      await update(tree);
+
+      const packageJson = readJson(tree, 'package.json');
+      expect(packageJson.devDependencies).toEqual({
+        '@nrwl/react': expect.any(String),
+        '@nrwl/webpack': expect.any(String),
+      });
+    }
+  );
+
+  it.each`
+    config
+    ${'main.ts'}
+    ${'main.js'}
+    ${null}
+  `(
+    'should not install @nrwl/webpack if it is not needed by React project',
+    async ({ config }) => {
+      addProjectConfiguration(tree, 'myapp', {
+        root: 'myapp',
+      });
+
+      if (config) {
+        tree.write(
+          `myapp/.storybook/${config}`,
+          `
+          module.exports = {
+            addons: []
+          };
+        `
+        );
+      }
+
+      await update(tree);
+
+      const packageJson = readJson(tree, 'package.json');
+      expect(packageJson.devDependencies).toEqual({
+        '@nrwl/react': expect.any(String),
+      });
+    }
+  );
+});
diff --git a/packages/storybook/src/migrations/update-15-5-3/ensure-webpack-package.ts b/packages/storybook/src/migrations/update-15-5-3/ensure-webpack-package.ts
@@ -0,0 +1,41 @@
+import {
+  addDependenciesToPackageJson,
+  getProjects,
+  joinPathFragments,
+  Tree,
+} from '@nrwl/devkit';
+import { nxVersion } from '../../utils/versions';
+
+// Add @nrwl/webpack as needed.
+// See: https://github.com/nrwl/nx/issues/14455
+export default async function update(tree: Tree) {
+  const projects = getProjects(tree);
+  const reactPlugin = '@nrwl/react/plugins/storybook';
+  let shouldInstall = false;
+
+  for (const [, config] of projects) {
+    let sbConfigPath = joinPathFragments(config.root, '.storybook/main.ts');
+
+    if (!tree.exists(sbConfigPath)) {
+      sbConfigPath = joinPathFragments(config.root, '.storybook/main.js');
+    }
+
+    if (!tree.exists(sbConfigPath)) {
+      continue;
+    }
+
+    const sbConfig = tree.read(sbConfigPath, 'utf-8');
+    if (sbConfig.includes(reactPlugin)) {
+      shouldInstall = true;
+      break;
+    }
+  }
+
+  if (shouldInstall) {
+    return addDependenciesToPackageJson(
+      tree,
+      {},
+      { '@nrwl/webpack': nxVersion }
+    );
+  }
+}
diff --git a/packages/webpack/src/generators/init/init.ts b/packages/webpack/src/generators/init/init.ts
@@ -2,14 +2,13 @@ import {
   addDependenciesToPackageJson,
   convertNxGenerator,
   formatFiles,
-  GeneratorCallback,
   Tree,
 } from '@nrwl/devkit';
-import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 import { swcCoreVersion } from '@nrwl/js/src/utils/versions';
 
 import { Schema } from './schema';
 import {
+  nxVersion,
   reactRefreshVersion,
   reactRefreshWebpackPluginVersion,
   svgrWebpackVersion,
@@ -21,54 +20,36 @@ import {
 import { addBabelInputs } from '@nrwl/js/src/utils/add-babel-inputs';
 
 export async function webpackInitGenerator(tree: Tree, schema: Schema) {
-  const tasks: GeneratorCallback[] = [];
-
   if (schema.compiler === 'babel') {
     addBabelInputs(tree);
   }
+  const devDependencies = {
+    '@nrwl/webpack': nxVersion,
+  };
 
   if (schema.compiler === 'swc') {
-    const swcInstallTask = addDependenciesToPackageJson(
-      tree,
-      {},
-      {
-        '@swc/helpers': swcHelpersVersion,
-        '@swc/core': swcCoreVersion,
-        'swc-loader': swcLoaderVersion,
-      }
-    );
-    tasks.push(swcInstallTask);
+    devDependencies['@swc/helpers'] = swcHelpersVersion;
+    devDependencies['@swc/core'] = swcCoreVersion;
+    devDependencies['swc-loader'] = swcLoaderVersion;
   }
 
   if (schema.compiler === 'tsc') {
-    const tscInstallTask = addDependenciesToPackageJson(
-      tree,
-      {},
-      { tslib: tsLibVersion }
-    );
-    tasks.push(tscInstallTask);
+    devDependencies['tslib'] = tsLibVersion;
   }
 
   if (schema.uiFramework === 'react') {
-    const reactInstallTask = addDependenciesToPackageJson(
-      tree,
-      {},
-      {
-        '@pmmmwh/react-refresh-webpack-plugin':
-          reactRefreshWebpackPluginVersion,
-        '@svgr/webpack': svgrWebpackVersion,
-        'react-refresh': reactRefreshVersion,
-        'url-loader': urlLoaderVersion,
-      }
-    );
-    tasks.push(reactInstallTask);
+    devDependencies['@pmmmwh/react-refresh-webpack-plugin'] =
+      reactRefreshWebpackPluginVersion;
+    devDependencies['@svgr/webpack'] = svgrWebpackVersion;
+    devDependencies['react-refresh'] = reactRefreshVersion;
+    devDependencies['url-loader'] = urlLoaderVersion;
   }
 
   if (!schema.skipFormat) {
     await formatFiles(tree);
   }
 
-  return runTasksInSerial(...tasks);
+  return addDependenciesToPackageJson(tree, {}, devDependencies);
 }
 
 export default webpackInitGenerator;