diff --git a/docs/generated/packages/react.json b/docs/generated/packages/react.json index f91b03a802d89..91ac6bd4280e7 100644 --- a/docs/generated/packages/react.json +++ b/docs/generated/packages/react.json @@ -53,6 +53,12 @@ "type": "boolean", "default": false }, + "skipHelperLibs": { + "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).", + "type": "boolean", + "default": false, + "hidden": true + }, "js": { "type": "boolean", "default": false, diff --git a/docs/shared/migration/migration-cra.md b/docs/shared/migration/migration-cra.md index 22d1c4c2ea819..3f7ddcd0014a9 100644 --- a/docs/shared/migration/migration-cra.md +++ b/docs/shared/migration/migration-cra.md @@ -1,327 +1,39 @@ # Migrating a Create-React-App project into an Nx Workspace -Create-React-App (CRA) is the most widely used tool for creating, building and testing a React app. This guide will show you how move an app generated with CRA into an Nx workspace. Once the migration process is complete, you'll be able to take advantage of all of Nx's features without needing to completely recreate your build process. +Create-React-App (CRA) is one of the most widely used tool for creating, building and testing a React app. This guide +will show you how move an app generated with CRA into an Nx workspace. Once the migration process is complete, you'll be +able to take advantage of all of Nx's features without needing to completely recreate your build process. -You can either use a CLI tool to migrate your app automatically, or you can follow the steps described below to do the migration manually. +## Automated migration -{% callout type="caution" title="Nx < 13" %} -This guide has been updated for Nx 13 and may not work for earlier versions of Nx. -{% /callout %} - -If you have a monorepo (more than one project in the same repo), follow the [Adding Nx to Lerna/Yarn/PNPM/NPM Workspace](/recipes/adopting-nx/adding-to-monorepo) guide instead. - -## Using a tool that will do it for you - -You can use the [`cra-to-nx`](https://www.npmjs.com/package/cra-to-nx) tool, that will run the following steps for you, and will turn your Create-React-App (CRA) project into an Nx workspace. - -Just `cd` into your Create-React-App (CRA) project and run the following command: +The easiest way to setup Nx in your CRA project is to use the automated migration tool. ```shell -npx cra-to-nx +npx nx init ``` -Then just sit back and wait. After a while, take advantage of the [full magic of Nx](/getting-started/intro). -Start from [the commands mentioned in this article](/recipes/adopting-nx/migration-cra#try-nx). - -{% callout type="caution" title="Commit your changes" %} -The command will fail if you try to execute it, and you have uncommitted changes in your repository. Commit any local changes, and then try to run the command. -{% /callout %} - -See it in action: - -{% youtube -src="https://www.youtube.com/embed/_XmbVpwo1vs" -title="Switch from CRA to Nx" -width="100%" /%} - -## Doing the migration manually - -In this article, you’ll learn how to: - -- Create an Nx workspace for a React application -- Migrate a React application into your Nx workspace -- Convert CRA scripts for use in Nx -- Create a library and use it in your application - -For this example, you’ll be migrating the default CRA typescript template app into an Nx workspace. This is the code that is generated when you run `npx create-react-app webapp --template typescript`. +The command above will detect that the project is generated with CRA, and that it has not been _ejected_, or _ +customized_ with either `react-app-rewired` or `@craco/craco`. If the project has either been ejected or customized, +then the migration will still continue but you will be prompted for more information. -There is also a [repo](https://github.com/nrwl/cra-to-nx-migration) that shows the finished result of this guide and for each step a [diff](https://github.com/nrwl/cra-to-nx-migration/commits/main) will be provided to see the exact code changes that occur for that step. +That's it! -{% github-repository url="https://github.com/nrwl/cra-to-nx-migration" /%} +{% callout type="note" title="Vite" %} +You will notice that the project now uses [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/) to build and +test your application. Vite is a next-gen tooling for building frontend applications, and is much faster than Webpack ( +which CRA uses). -### 1. Create your workspace - -To start migrating your app, create an Nx workspace: - -```shell -npx create-nx-workspace@latest acme --appName=webapp --preset=react --style=css --nx-cloud -``` - -{% callout type="warning" title="Scope & appName?" %} -Replace `acme` with your organization's npm scope. This will be used when importing workspace projects. You can also replace `webapp` with a different name -- you can have more than one app in an Nx workspace. +If you do not want to use Vite, you can run `npx nx init --vite=false` instead. {% /callout %} -### 2. Add npm packages to your workspace to support CRA - -We'll need to add a few dependencies to the Nx workspace that are needed to allow CRA to function. - -{% tabs %} -{% tab label="yarn" %} - -```shell -yarn add --dev react-scripts @testing-library/jest-dom eslint-config-react-app @craco/craco -yarn add web-vitals -``` - -{% /tab %} -{% tab label="npm" %} - -```shell -npm install --force --save-dev react-scripts @testing-library/jest-dom eslint-config-react-app @craco/craco -npm install --save web-vitals -``` - -{% /tab %} -{% /tabs %} - -{% callout type="note" title="What is @craco/craco?" %} -The `@craco/craco` package allows us to customize the webpack and jest config without ejecting. -{% /callout %} - -### 3. Replace code generated by Nx with the CRA app - -The source code for each app in an Nx workspace should be contained within the folder of a generated app. The `create-nx-workspace` command from step 1 created an app folder at `apps/webapp` that we can use to contain the CRA app. Delete the existing contents and copy over the CRA app code. - -```shell -cd apps/webapp -ls -A . | grep -v 'project.json' | xargs rm -rf -cd - -cp -r /path/to/cra-app/{README.md,package.json,tsconfig.json,src,public} apps/webapp -``` - -Replace `/path/to/cra-app` with the actual path to your CRA app on your machine. - -### 4. Customize webpack using craco - -The `@craco/craco` package allows you to customize the webpack config of CRA by creating `apps/webapp/craco.config.js`. Inline comments explain what each section is doing: - -#### Copy this code if you are using CRA >=v5 - -```javascript -const path = require('path'); -const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); -const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); -module.exports = { - webpack: { - configure: (config) => { - // Remove guard against importing modules outside of \`src\`. - // Needed for workspace projects. - config.resolve.plugins = config.resolve.plugins.filter( - (plugin) => !(plugin instanceof ModuleScopePlugin) - ); - // Add support for importing workspace projects. - config.resolve.plugins.push( - new TsConfigPathsPlugin({ - configFile: path.resolve(__dirname, 'tsconfig.json'), - extensions: ['.ts', '.tsx', '.js', '.jsx'], - mainFields: ['module', 'main'], - }) - ); - - // Replace include option for babel loader with exclude - // so babel will handle workspace projects as well. - config.module.rules[1].oneOf.forEach((r) => { - if (r.loader && r.loader.indexOf('babel') !== -1) { - r.exclude = /node_modules/; - delete r.include; - } - }); - - return config; - }, - }, - jest: { - configure: (config) => { - config.resolver = '@nrwl/jest/plugins/resolver'; - return config; - }, - }, -}; -``` - -#### Copy this code if you are using CRA <=v4 - -```javascript -const path = require('path'); -const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); -const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); -module.exports = { - webpack: { - configure: (config) => { - // Remove guard against importing modules outside of \`src\`. - // Needed for workspace projects. - config.resolve.plugins = config.resolve.plugins.filter( - (plugin) => !(plugin instanceof ModuleScopePlugin) - ); - // Add support for importing workspace projects. - config.resolve.plugins.push( - new TsConfigPathsPlugin({ - configFile: path.resolve(__dirname, 'tsconfig.json'), - extensions: ['.ts', '.tsx', '.js', '.jsx'], - mainFields: ['module', 'main'], - }) - ); - - // Replace include option for babel loader with exclude - // so babel will handle workspace projects as well. - config.module.rules.forEach((r) => { - if (r.oneOf) { - const babelLoader = r.oneOf.find( - (rr) => rr.loader.indexOf('babel-loader') !== -1 - ); - babelLoader.exclude = /node_modules/; - delete babelLoader.include; - } - }); - - return config; - }, - }, - jest: { - configure: (config) => { - config.resolver = '@nrwl/jest/plugins/resolver'; - return config; - }, - }, -}; -``` - -### 5. Update package scripts - -Update your app's `package.json` file (path: `apps/webapp/package.json`) to use `craco` instead of `react-scripts`. - -```text {% fileName="apps/webapp/package.json" %} -{ - ... - "scripts": { - "serve": "craco start", - "build": "BUILD_PATH=../../dist/apps/cra-app craco build", - "test": "craco test", - "eject": "react-scripts eject" - }, - ... -} -``` - -{% callout type="note" title="BUILD_PATH" %} -The `BUILD_PATH` variable is set to be consistent with other Nx projects. This is optional so you can remove it. -{% /callout %} - -### 6. Remove targets from project.json - -Your new project will use the `craco` scripts we added in `apps/webapp/package.json` in the previous step. Therefore, it will not need the `targets` set in `project.json` by Nx. In fact, if we leave the targets there, Nx will try to use this and it will fail. So we need to remove them. - -In `apps/webapp/project.json` remove the `targets` object. The result will look like this: - -```json {% fileName="apps/webapp/project.json" %} -{ - "root": "apps/webapp", - "sourceRoot": "apps/webapp/src", - "projectType": "application", - "tags": [] -} -``` - -### 7. Extend the app's tsconfig.json from the base - -Modify `apps/webapp/tsconfig.json` to extend the root `tsconfig.base.json`. This is primarily to pickup the typescript aliases from the root tsconfig file. - -```jsonc {% fileName="apps/webapp/tsconfig.json" %} -{ - "extends": "../../tsconfig.base.json", - ... -} -``` - -### 8. Add tsconfig files for jest and eslint - -It's helpful to have separate `tsconfig.json` files for testing and linting. In this instance, the actual typescript settings are identical to the base config, so these tsconfig files will extend the base without modifying any values. - -```shell -echo '{ "extends": "./tsconfig.json" }' > apps/webapp/tsconfig.app.json -echo '{ "extends": "./tsconfig.json" }' > apps/webapp/tsconfig.spec.json -``` - -### 9. Skip CRA preflight check since Nx manages the monorepo. - -CRA checks to make sure there are no incompatible dependencies before any scripts run, but the `@nrwl/react` plugin serves the same purpose and requires slightly different versions in order to function correctly in an Nx workspace. Setting this environment variable disables CRA's check. - -```shell -echo "SKIP_PREFLIGHT_CHECK=true" > .env -``` - -### 10. Add all node_modules to .gitignore - -An `apps/webapp/node_modules` folder will be generated to hold some cache values when a build is run. This cache shouldn't be committed to git, so we tell git to ignore any `node_modules` folder. - -```shell -echo "node_modules" >> .gitignore -``` - ## Try Nx -### 1. Try the commands - -The following commands are now available for you to try. +Use the same scripts as before, and Nx will run underneath the hood with `nx exec`. ```shell -npx nx serve webapp -npx nx build webapp -npx nx test webapp +npm start +npm run build +npm test ``` -The `serve` command will automatically update when code changes, but needs to be restarted if you add a whole new library to your workspace. - -`build` and `test` are set up to automatically cache their results. Subsequent runs of `nx build webapp` (without changing any code) should only take a couple seconds. - -(No code changes for this step.) - -### 2. Create a library - -Nx makes it very easy to create isolated collections of reusable code in libraries. Running this script will create a library named `ui-button`. - -```shell -nx generate lib ui-button -``` - -[View the code changes](https://github.com/nrwl/cra-to-nx-migration/commit/87cdbd1e8195b9ca1e726f15d6ced18c02f728b7) - -### 3. Use the library - -The new library can be used in your app like by adding this code to `App.tsx`: - -```typescriptx {% fileName="App.tsx" %} -//... -import { UiButton } from '@acme/ui-button'; -//... -Learn React; -//... -``` - -Make sure you also copy the code for your new `ui-button` from [here](https://github.com/nrwl/cra-to-nx-migration/commit/782ce78d46b14f5f802e1b1cf31be566d15ce41f). - -The `@acme/ui-button` path alias is defined in the root `tsconfig.base.json` file. - -Now serve the app again to see the result: - -```shell -nx serve webapp -``` - -[View the code changes](https://github.com/nrwl/cra-to-nx-migration/commit/782ce78d46b14f5f802e1b1cf31be566d15ce41f) - -## Summary - -- Create-React-App projects can be migrated into an Nx workspace using existing build and serve processes -- `@craco/craco` allows you to continue using CRA and modify the webpack configuration -- Caching is automatically enabled as part of the migration +`build` and `test` are set up to automatically cache their results. Subsequent runs of `npm run build` (without changing any code), for example, should only take a couple seconds. diff --git a/e2e/cra-to-nx/project.json b/e2e/cra-to-nx/project.json index 3bb6a620390aa..64215e11e61b0 100644 --- a/e2e/cra-to-nx/project.json +++ b/e2e/cra-to-nx/project.json @@ -31,5 +31,5 @@ "outputs": ["{workspaceRoot}/coverage/e2e/cra-to-nx"] } }, - "implicitDependencies": ["workspace"] + "implicitDependencies": ["cra-to-nx"] } diff --git a/e2e/cra-to-nx/src/cra-to-nx.test.ts b/e2e/cra-to-nx/src/cra-to-nx.test.ts index 1f29a782d2f5f..5487d3a31e3fb 100644 --- a/e2e/cra-to-nx/src/cra-to-nx.test.ts +++ b/e2e/cra-to-nx/src/cra-to-nx.test.ts @@ -4,7 +4,6 @@ import { getPublishedVersion, getSelectedPackageManager, readFile, - readJson, runCLI, runCommand, updateFile, @@ -15,7 +14,7 @@ const pmc = getPackageManagerCommand({ packageManager: getSelectedPackageManager(), }); -describe('cra-to-nx', () => { +describe('nx init (for CRA)', () => { it('should convert to an integrated workspace with craco (webpack)', () => { const appName = 'my-app'; createReactApp(appName); @@ -23,20 +22,13 @@ describe('cra-to-nx', () => { const craToNxOutput = runCommand( `${ pmc.runUninstalledPackage - } cra-to-nx@${getPublishedVersion()} --nxCloud=false --integrated` + } nx@${getPublishedVersion()} init --nxCloud=false --integrated --vite=false` ); expect(craToNxOutput).toContain('🎉 Done!'); runCLI(`build ${appName}`); - checkFilesExist( - `dist/apps/${appName}/index.html`, - `dist/apps/${appName}/asset-manifest.json` - ); - const manifest = readJson(`dist/apps/${appName}/asset-manifest.json`); - checkFilesExist( - ...manifest['entrypoints'].map((f) => `dist/apps/${appName}/${f}`) - ); + checkFilesExist(`dist/apps/${appName}/index.html`); }); it('should convert to an integrated workspace with Vite', () => { @@ -46,7 +38,7 @@ describe('cra-to-nx', () => { const craToNxOutput = runCommand( `${ pmc.runUninstalledPackage - } cra-to-nx@${getPublishedVersion()} --nxCloud=false --vite --integrated` + } nx@${getPublishedVersion()} init --nxCloud=false --integrated` ); expect(craToNxOutput).toContain('🎉 Done!'); @@ -69,7 +61,7 @@ describe('cra-to-nx', () => { runCommand( `${ pmc.runUninstalledPackage - } cra-to-nx@${getPublishedVersion()} --nxCloud=false --vite --force --integrated` + } nx@${getPublishedVersion()} init --nxCloud=false --force --integrated` ); const viteConfig = readFile(`apps/${appName}/vite.config.js`); @@ -86,15 +78,13 @@ describe('cra-to-nx', () => { const craToNxOutput = runCommand( `${ pmc.runUninstalledPackage - } cra-to-nx@${getPublishedVersion()} --nxCloud=false` + } nx@${getPublishedVersion()} init --nxCloud=false --vite=false` ); expect(craToNxOutput).toContain('🎉 Done!'); runCLI(`build ${appName}`); - checkFilesExist(`public/index.html`, `dist/asset-manifest.json`); - const manifest = readJson(`dist/asset-manifest.json`); - checkFilesExist(...manifest['entrypoints'].map((f) => `dist/${f}`)); + checkFilesExist(`dist/${appName}/index.html`); }); it('should convert to an nested workspace with Vite', () => { @@ -104,7 +94,7 @@ describe('cra-to-nx', () => { const craToNxOutput = runCommand( `${ pmc.runUninstalledPackage - } cra-to-nx@${getPublishedVersion()} --nxCloud=false --vite` + } nx@${getPublishedVersion()} init --nxCloud=false --vite` ); expect(craToNxOutput).toContain('🎉 Done!'); @@ -113,7 +103,7 @@ describe('cra-to-nx', () => { expect(viteConfig).toContain('port: 4200'); // default port runCLI(`build ${appName}`); - checkFilesExist(`dist/index.html`); + checkFilesExist(`dist/${appName}/index.html`); const unitTestsOutput = runCLI(`test ${appName}`); expect(unitTestsOutput).toContain('Successfully ran target test'); diff --git a/e2e/react/src/react-package.test.ts b/e2e/react/src/react-package.test.ts index 447744a0609ea..fd151baeb87ce 100644 --- a/e2e/react/src/react-package.test.ts +++ b/e2e/react/src/react-package.test.ts @@ -1,7 +1,6 @@ import { checkFilesDoNotExist, checkFilesExist, - cleanupProject, getSize, killPorts, newProject, @@ -252,6 +251,14 @@ export async function h() { return 'c'; } }).toThrow(); }, 250000); }); +}); + +describe('Build React applications and libraries with Vite', () => { + let proj: string; + + beforeEach(() => { + proj = newProject(); + }); it('should support bundling with Vite', async () => { const libName = uniq('lib'); @@ -260,6 +267,11 @@ export async function h() { return 'c'; } `generate @nrwl/react:lib ${libName} --bundler=vite --no-interactive` ); + const packageJson = readJson('package.json'); + // Vite does not need these libraries to work. + expect(packageJson.dependencies['core-js']).toBeUndefined(); + expect(packageJson.dependencies['tslib']).toBeUndefined(); + await runCLIAsync(`build ${libName}`); checkFilesExist( diff --git a/packages/cra-to-nx/src/lib/add-craco-commands-to-package-scripts.ts b/packages/cra-to-nx/src/lib/add-craco-commands-to-package-scripts.ts index ce0d18b905e01..40af912523cba 100644 --- a/packages/cra-to-nx/src/lib/add-craco-commands-to-package-scripts.ts +++ b/packages/cra-to-nx/src/lib/add-craco-commands-to-package-scripts.ts @@ -7,7 +7,7 @@ export function addCracoCommandsToPackageScripts( const packageJsonPath = isNested ? 'package.json' : `apps/${appName}/package.json`; - const distPath = isNested ? 'dist' : `../../dist/apps/${appName}`; + const distPath = isNested ? `dist/${appName}` : `../../dist/apps/${appName}`; const packageJson = readJsonFile(packageJsonPath); packageJson.scripts = { ...packageJson.scripts, diff --git a/packages/cra-to-nx/src/lib/write-vite-config.ts b/packages/cra-to-nx/src/lib/write-vite-config.ts index b123d2e83cd71..e096d30e80f38 100644 --- a/packages/cra-to-nx/src/lib/write-vite-config.ts +++ b/packages/cra-to-nx/src/lib/write-vite-config.ts @@ -25,7 +25,7 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ build: { - outDir: ${isNested ? `'./dist'` : `'../../dist/apps/${appName}'`} + outDir: ${isNested ? `'./dist/${appName}'` : `'../../dist/apps/${appName}'`} }, server: { port: ${port}, diff --git a/packages/nx/src/command-line/init.ts b/packages/nx/src/command-line/init.ts index 7282e0428a904..0760fbc2e0783 100644 --- a/packages/nx/src/command-line/init.ts +++ b/packages/nx/src/command-line/init.ts @@ -1,6 +1,6 @@ import { execSync } from 'child_process'; import { existsSync } from 'fs'; -import { readJsonFile } from '../utils/fileutils'; +import { readJsonFile, directoryExists } from '../utils/fileutils'; import { addNxToNpmRepo } from '../nx-init/add-nx-to-npm-repo'; export async function initHandler() { @@ -11,6 +11,11 @@ export async function initHandler() { execSync(`npx --yes make-angular-cli-faster@latest ${args}`, { stdio: [0, 1, 2], }); + } else if (isCRA()) { + // TODO(jack): remove cra-to-nx + execSync(`npx --yes cra-to-nx@latest ${args}`, { + stdio: [0, 1, 2], + }); } else if (isMonorepo()) { // TODO: vsavkin remove add-nx-to-monorepo execSync(`npx --yes add-nx-to-monorepo@latest ${args}`, { @@ -26,6 +31,25 @@ export async function initHandler() { } } +function isCRA() { + const packageJson = readJsonFile('package.json'); + const combinedDependencies = { + ...packageJson.dependencies, + ...packageJson.devDependencies, + }; + return ( + // Required dependencies for CRA projects + combinedDependencies['react'] && + combinedDependencies['react-dom'] && + combinedDependencies['react-scripts'] && + // // Don't convert customized CRA projects + !combinedDependencies['react-app-rewired'] && + !combinedDependencies['@craco/craco'] && + directoryExists('src') && + directoryExists('public') + ); +} + function isMonorepo() { const packageJson = readJsonFile('package.json'); if (!!packageJson.workspaces) return true; diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts index 7898d5bf9bff7..72a3c2055fe3c 100644 --- a/packages/react/src/generators/application/application.ts +++ b/packages/react/src/generators/application/application.ts @@ -81,6 +81,7 @@ export async function applicationGenerator(host: Tree, schema: Schema) { ...options, skipFormat: true, skipBabelConfig: options.bundler === 'vite', + skipHelperLibs: options.bundler === 'vite', }); tasks.push(initTask); diff --git a/packages/react/src/generators/init/init.ts b/packages/react/src/generators/init/init.ts index 993bc93610042..e5526e4a8320c 100755 --- a/packages/react/src/generators/init/init.ts +++ b/packages/react/src/generators/init/init.ts @@ -42,27 +42,28 @@ function setDefault(host: Tree) { updateWorkspaceConfiguration(host, { ...workspace, generators }); } -function updateDependencies(host: Tree) { +function updateDependencies(host: Tree, schema: InitSchema) { removeDependenciesFromPackageJson(host, ['@nrwl/react'], []); - return addDependenciesToPackageJson( - host, - { - 'core-js': '^3.6.5', - react: reactVersion, - 'react-dom': reactDomVersion, - 'regenerator-runtime': '0.13.7', - tslib: tsLibVersion, - }, - { - '@nrwl/react': nxVersion, - '@types/node': typesNodeVersion, - '@types/react': typesReactVersion, - '@types/react-dom': typesReactDomVersion, - '@testing-library/react': testingLibraryReactVersion, - 'react-test-renderer': reactTestRendererVersion, - } - ); + const dependencies = { + react: reactVersion, + 'react-dom': reactDomVersion, + }; + + if (!schema.skipHelperLibs) { + dependencies['core-js'] = '^3.6.5'; + dependencies['regenerator-runtime'] = '0.13.7'; + dependencies['tslib'] = tsLibVersion; + } + + return addDependenciesToPackageJson(host, dependencies, { + '@nrwl/react': nxVersion, + '@types/node': typesNodeVersion, + '@types/react': typesReactVersion, + '@types/react-dom': typesReactDomVersion, + '@testing-library/react': testingLibraryReactVersion, + 'react-test-renderer': reactTestRendererVersion, + }); } export async function reactInitGenerator(host: Tree, schema: InitSchema) { @@ -75,10 +76,14 @@ export async function reactInitGenerator(host: Tree, schema: InitSchema) { tasks.push(cypressTask); } - const initTask = await webInitGenerator(host, schema); + // TODO(jack): We should be able to remove this generator and have react init everything. + const initTask = await webInitGenerator(host, { + ...schema, + skipPackageJson: true, + }); tasks.push(initTask); if (!schema.skipPackageJson) { - const installTask = updateDependencies(host); + const installTask = updateDependencies(host, schema); tasks.push(installTask); } diff --git a/packages/react/src/generators/init/schema.d.ts b/packages/react/src/generators/init/schema.d.ts index 65431d3fac869..1d339905bcb6a 100644 --- a/packages/react/src/generators/init/schema.d.ts +++ b/packages/react/src/generators/init/schema.d.ts @@ -4,5 +4,6 @@ export interface InitSchema { skipBabelConfig?: boolean; skipFormat?: boolean; skipPackageJson?: boolean; + skipHelperLibs?: boolean; js?: boolean; } diff --git a/packages/react/src/generators/init/schema.json b/packages/react/src/generators/init/schema.json index 458ee719ee2b6..1f907f6d25937 100644 --- a/packages/react/src/generators/init/schema.json +++ b/packages/react/src/generators/init/schema.json @@ -33,6 +33,12 @@ "type": "boolean", "default": false }, + "skipHelperLibs": { + "description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).", + "type": "boolean", + "default": false, + "hidden": true + }, "js": { "type": "boolean", "default": false, diff --git a/packages/react/src/generators/library/library.ts b/packages/react/src/generators/library/library.ts index 90377eac179ba..d6303a242ee1c 100644 --- a/packages/react/src/generators/library/library.ts +++ b/packages/react/src/generators/library/library.ts @@ -81,6 +81,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) { e2eTestRunner: 'none', skipFormat: true, skipBabelConfig: options.bundler === 'vite', + skipHelperLibs: options.bundler === 'vite', }); tasks.push(initTask); diff --git a/packages/workspace/src/generators/preset/preset.ts b/packages/workspace/src/generators/preset/preset.ts index 8c2918d49a31f..dff42e63fc794 100644 --- a/packages/workspace/src/generators/preset/preset.ts +++ b/packages/workspace/src/generators/preset/preset.ts @@ -70,6 +70,8 @@ async function createPreset(tree: Tree, options: Schema) { standaloneConfig: options.standaloneConfig, rootProject: true, bundler: 'vite', + e2eTestRunner: 'none', + unitTestRunner: 'vitest', }); } else if (options.preset === Preset.NextJs) { const { applicationGenerator: nextApplicationGenerator } = require('@nrwl' +