fix(web): remove hard dependencies to @nrwl/vite and @nrwl/webpack (#14408)

(cherry picked from commit e0bd338)

Author: jaysoo

packages/web/package.json

@@ -43,8 +43,6 @@
     "@nrwl/js": "file:../js",
     "@nrwl/linter": "file:../linter",
     "@nrwl/rollup": "file:../rollup",
-    "@nrwl/vite": "file:../vite",
-    "@nrwl/webpack": "file:../webpack",
     "@nrwl/workspace": "file:../workspace",
     "babel-plugin-const-enum": "^1.0.1",
     "babel-plugin-macros": "^2.8.0",

packages/web/src/executors/dev-server/dev-server.impl.ts

@@ -2,7 +2,19 @@
  * This is here for backwards-compat.
  * TODO(jack): remove in Nx 16.
  */
-import { devServerExecutor, WebDevServerOptions } from '@nrwl/webpack';
+import { ExecutorContext } from '@nrwl/devkit';
 
-export { devServerExecutor, WebDevServerOptions };
+export async function* devServerExecutor(
+  options: any,
+  context: ExecutorContext
+) {
+  const { devServerExecutor: baseDevServerExecutor } = require('@nrwl/webpack');
+  yield* baseDevServerExecutor(
+    {
+      ...options,
+      target: 'web',
+    },
+    context
+  );
+}
 export default devServerExecutor;

packages/web/src/executors/webpack/webpack.impl.ts

@@ -3,13 +3,9 @@
  * TODO(jack): Remove in Nx 16.
  */
 import { ExecutorContext } from '@nrwl/devkit';
-import type { WebpackExecutorOptions } from '@nrwl/webpack';
-import { webpackExecutor as baseWebpackExecutor } from '@nrwl/webpack';
 
-export async function* webpackExecutor(
-  options: WebpackExecutorOptions,
-  context: ExecutorContext
-) {
+export async function* webpackExecutor(options: any, context: ExecutorContext) {
+  const { webpackExecutor: baseWebpackExecutor } = require('@nrwl/webpack');
   yield* baseWebpackExecutor(
     {
       ...options,

packages/web/src/generators/application/application.ts

@@ -1,10 +1,10 @@
 import { join } from 'path';
-import { webpackProjectGenerator } from '@nrwl/webpack';
 import { cypressProjectGenerator } from '@nrwl/cypress';
 import {
   addDependenciesToPackageJson,
   addProjectConfiguration,
   convertNxGenerator,
+  ensurePackage,
   extractLayoutDirectory,
   formatFiles,
   generateFiles,
@@ -25,9 +25,8 @@ import { swcCoreVersion } from '@nrwl/js/src/utils/versions';
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 import { getRelativePathToRootTsConfig } from '@nrwl/workspace/src/utilities/typescript';
-import { viteConfigurationGenerator, vitestGenerator } from '@nrwl/vite';
 
-import { swcLoaderVersion } from '../../utils/versions';
+import { nxVersion, swcLoaderVersion } from '../../utils/versions';
 import { webInitGenerator } from '../init/init';
 import { Schema } from './schema';
 
@@ -75,6 +74,8 @@ async function setupBundler(tree: Tree, options: NormalizedSchema) {
   ];
 
   if (options.bundler === 'webpack') {
+    await ensurePackage(tree, '@nrwl/webpack', nxVersion);
+    const { webpackProjectGenerator } = require('@nrwl/webpack');
     await webpackProjectGenerator(tree, {
       project: options.projectName,
       main,
@@ -194,6 +195,8 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
   await addProject(host, options);
 
   if (options.bundler === 'vite') {
+    await ensurePackage(host, '@nrwl/vite', nxVersion);
+    const { viteConfigurationGenerator } = require('@nrwl/vite');
     // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.
     // See: https://vitejs.dev/guide/env-and-mode.html
     host.delete(joinPathFragments(options.appProjectRoot, 'src/environments'));
@@ -209,6 +212,8 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
   }
 
   if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
+    await ensurePackage(host, '@nrwl/vite', nxVersion);
+    const { vitestGenerator } = require('@nrwl/vite');
     const vitestTask = await vitestGenerator(host, {
       uiFramework: 'none',
       project: options.projectName,