From 6684fc06884cb96da254b03d15a5098200170e63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?=
 <leosvel.perez.espinosa@gmail.com>
Date: Tue, 10 Dec 2024 11:58:51 +0100
Subject: [PATCH] fix(vite)!: generate config with esm by default (#29270)

BREAKING CHANGE

When generating projects that use Vite, the Vite configuration will be
set to use the ESM format only. Previously, the configuration was set to
produce both ESM and CJS, but the dual format was not correctly
configured in the libraries' `package.json` files, nor was it producing
the correct declaration files.

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
---
 docs/shared/packages/vite/configure-vite.md        |  2 +-
 e2e/react/src/react-vite.test.ts                   |  3 ---
 .../library/__snapshots__/library.spec.ts.snap     |  2 +-
 .../react/src/generators/library/library.spec.ts   |  4 +++-
 packages/react/src/generators/library/library.ts   |  1 +
 .../src/generators/library/library.impl.spec.ts    |  1 +
 .../__snapshots__/configuration.spec.ts.snap       |  8 ++++----
 .../generators/configuration/configuration.spec.ts |  6 +++---
 .../src/generators/configuration/configuration.ts  |  6 +-----
 .../vite-config-edit-utils.spec.ts.snap            |  2 +-
 packages/vite/src/utils/generator-utils.spec.ts    |  2 +-
 packages/vite/src/utils/generator-utils.ts         |  4 ++--
 .../vite/src/utils/test-files/test-vite-configs.ts |  6 +++---
 .../vite/src/utils/vite-config-edit-utils.spec.ts  | 14 +++++++-------
 .../library/__snapshots__/library.spec.ts.snap     |  4 ++--
 15 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/docs/shared/packages/vite/configure-vite.md b/docs/shared/packages/vite/configure-vite.md
index 50f92be0fe961..ea33782eec921 100644
--- a/docs/shared/packages/vite/configure-vite.md
+++ b/docs/shared/packages/vite/configure-vite.md
@@ -218,7 +218,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
diff --git a/e2e/react/src/react-vite.test.ts b/e2e/react/src/react-vite.test.ts
index ec3d4770dc896..fb71af58adc6f 100644
--- a/e2e/react/src/react-vite.test.ts
+++ b/e2e/react/src/react-vite.test.ts
@@ -116,7 +116,6 @@ describe('Build React applications and libraries with Vite', () => {
     await runCLIAsync(`build ${viteLib}`);
     checkFilesExist(
       `dist/libs/${viteLib}/index.d.ts`,
-      `dist/libs/${viteLib}/index.js`,
       `dist/libs/${viteLib}/index.mjs`
     );
   }, 300_000);
@@ -132,7 +131,6 @@ describe('Build React applications and libraries with Vite', () => {
 
     checkFilesExist(
       `dist/libs/${viteLib}/index.d.ts`,
-      `dist/libs/${viteLib}/index.js`,
       `dist/libs/${viteLib}/index.mjs`
     );
 
@@ -147,7 +145,6 @@ describe('Build React applications and libraries with Vite', () => {
     await runCLIAsync(`build ${nonBuildableLib}`);
     checkFilesExist(
       `dist/libs/${nonBuildableLib}/index.d.ts`,
-      `dist/libs/${nonBuildableLib}/index.js`,
       `dist/libs/${nonBuildableLib}/index.mjs`,
       `dist/libs/${nonBuildableLib}/README.md`
     );
diff --git a/packages/react/src/generators/library/__snapshots__/library.spec.ts.snap b/packages/react/src/generators/library/__snapshots__/library.spec.ts.snap
index cd3143bed9ce5..42382d282f23c 100644
--- a/packages/react/src/generators/library/__snapshots__/library.spec.ts.snap
+++ b/packages/react/src/generators/library/__snapshots__/library.spec.ts.snap
@@ -68,7 +68,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
diff --git a/packages/react/src/generators/library/library.spec.ts b/packages/react/src/generators/library/library.spec.ts
index be647296211fb..7e5b1cef16bdf 100644
--- a/packages/react/src/generators/library/library.spec.ts
+++ b/packages/react/src/generators/library/library.spec.ts
@@ -967,7 +967,7 @@ module.exports = withNx(
               fileName: 'index',
               // Change this to the formats you want to support.
               // Don't forget to update your package.json as well.
-              formats: ['es', 'cjs']
+              formats: ['es']
             },
             rollupOptions: {
               // External packages that should not be bundled into your library.
@@ -1129,6 +1129,7 @@ module.exports = withNx(
             "sourceRoot": "mylib/src",
           },
           "types": "./src/index.ts",
+          "version": "0.0.1",
         }
       `);
       expect(readJson(tree, 'myjslib/package.json')).toMatchInlineSnapshot(`
@@ -1141,6 +1142,7 @@ module.exports = withNx(
             "sourceRoot": "myjslib/src",
           },
           "types": "./src/index.js",
+          "version": "0.0.1",
         }
       `);
     });
diff --git a/packages/react/src/generators/library/library.ts b/packages/react/src/generators/library/library.ts
index cfa3e4832c3a5..5946f367671e1 100644
--- a/packages/react/src/generators/library/library.ts
+++ b/packages/react/src/generators/library/library.ts
@@ -75,6 +75,7 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) {
         : undefined;
     writeJson(host, `${options.projectRoot}/package.json`, {
       name: options.importPath,
+      version: '0.0.1',
       main: sourceEntry,
       types: sourceEntry,
       nx: {
diff --git a/packages/remix/src/generators/library/library.impl.spec.ts b/packages/remix/src/generators/library/library.impl.spec.ts
index 655e546bc12ad..61e1265aa13af 100644
--- a/packages/remix/src/generators/library/library.impl.spec.ts
+++ b/packages/remix/src/generators/library/library.impl.spec.ts
@@ -175,6 +175,7 @@ describe('Remix Library Generator', () => {
             "sourceRoot": "packages/foo/src",
           },
           "types": "./src/index.ts",
+          "version": "0.0.1",
         }
       `);
     });
diff --git a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
index d60f1c263f45a..86c1633d33c5e 100644
--- a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
+++ b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
@@ -39,7 +39,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
@@ -210,7 +210,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
@@ -262,7 +262,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
@@ -309,7 +309,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
diff --git a/packages/vite/src/generators/configuration/configuration.spec.ts b/packages/vite/src/generators/configuration/configuration.spec.ts
index 8fce12d571e47..2fcaf5cd0a8f7 100644
--- a/packages/vite/src/generators/configuration/configuration.spec.ts
+++ b/packages/vite/src/generators/configuration/configuration.spec.ts
@@ -370,15 +370,15 @@ describe('@nx/vite:configuration', () => {
         {
           "exports": {
             ".": {
-              "default": "./dist/index.js",
-              "import": "./dist/index.mjs",
+              "import": "./dist/index.js",
               "types": "./dist/index.d.ts",
             },
             "./package.json": "./package.json",
           },
           "main": "./dist/index.js",
-          "module": "./dist/index.mjs",
+          "module": "./dist/index.js",
           "name": "@proj/my-lib",
+          "type": "module",
           "types": "./dist/index.d.ts",
           "version": "0.0.1",
         }
diff --git a/packages/vite/src/generators/configuration/configuration.ts b/packages/vite/src/generators/configuration/configuration.ts
index 427a5303e873b..1d020b00a1602 100644
--- a/packages/vite/src/generators/configuration/configuration.ts
+++ b/packages/vite/src/generators/configuration/configuration.ts
@@ -216,11 +216,7 @@ function updatePackageJson(
       rootDir,
       generateExportsField: true,
       packageJsonPath,
-      format: ['esm', 'cjs'],
-      // when building both formats, we don't set the package.json "type" field, so
-      // we need to set the esm extension to ".mjs" to match vite output
-      // see the "File Extensions" callout in https://vite.dev/guide/build.html#library-mode
-      outputFileExtensionForEsm: '.mjs',
+      format: ['esm'],
     });
   }
 
diff --git a/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap b/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap
index 3779a195fa005..ddde13e973a4c 100644
--- a/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap
+++ b/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap
@@ -16,7 +16,7 @@ exports[`ensureViteConfigIsCorrect should add build options if it is using condi
         ...{
           my: 'option',
         },
-        ..."\\n    // Configuration for building your library.\\n    // See: https://vitejs.dev/guide/build.html#library-mode\\n    build: {\\n      lib: {\\n        // Could also be a dictionary or array of multiple entry points.\\n        entry: 'src/index.ts',\\n        name: 'my-app',\\n        fileName: 'index',\\n        // Change this to the formats you want to support.\\n        // Don't forget to update your package.json as well.\\n        formats: ['es', 'cjs']\\n      },\\n      rollupOptions: {\\n        // External packages that should not be bundled into your library.\\n        external: ['react', 'react-dom', 'react/jsx-runtime']\\n      }\\n    },"
+        ..."\\n    // Configuration for building your library.\\n    // See: https://vitejs.dev/guide/build.html#library-mode\\n    build: {\\n      lib: {\\n        // Could also be a dictionary or array of multiple entry points.\\n        entry: 'src/index.ts',\\n        name: 'my-app',\\n        fileName: 'index',\\n        // Change this to the formats you want to support.\\n        // Don't forget to update your package.json as well.\\n        formats: ['es']\\n      },\\n      rollupOptions: {\\n        // External packages that should not be bundled into your library.\\n        external: ['react', 'react-dom', 'react/jsx-runtime']\\n      }\\n    },"
       }
       }
     })
diff --git a/packages/vite/src/utils/generator-utils.spec.ts b/packages/vite/src/utils/generator-utils.spec.ts
index 0facc368a6946..81921cdcec7bc 100644
--- a/packages/vite/src/utils/generator-utils.spec.ts
+++ b/packages/vite/src/utils/generator-utils.spec.ts
@@ -168,7 +168,7 @@ describe('generator utils', () => {
               fileName: 'index',
               // Change this to the formats you want to support.
               // Don't forget to update your package.json as well.
-              formats: ['es', 'cjs']
+              formats: ['es']
             },
             rollupOptions: {
               // External packages that should not be bundled into your library.
diff --git a/packages/vite/src/utils/generator-utils.ts b/packages/vite/src/utils/generator-utils.ts
index 9b939fa0b4ae8..11e1c436ad446 100644
--- a/packages/vite/src/utils/generator-utils.ts
+++ b/packages/vite/src/utils/generator-utils.ts
@@ -409,7 +409,7 @@ export function createOrEditViteConfig(
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs']
+      formats: ['es']
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
@@ -723,7 +723,7 @@ function handleViteConfigFileExists(
           entry: 'src/index.ts',
           name: options.project,
           fileName: 'index',
-          formats: ['es', 'cjs'],
+          formats: ['es'],
         },
         rollupOptions: {
           external: options.rollupOptionsExternal ?? [],
diff --git a/packages/vite/src/utils/test-files/test-vite-configs.ts b/packages/vite/src/utils/test-files/test-vite-configs.ts
index 4024b32f31e47..48468c642a8fd 100644
--- a/packages/vite/src/utils/test-files/test-vite-configs.ts
+++ b/packages/vite/src/utils/test-files/test-vite-configs.ts
@@ -159,7 +159,7 @@ export const hasEverything = `
           fileName: 'index',
           // Change this to the formats you want to support.
           // Don't forget to update your package.json as well.
-          formats: ['es', 'cjs'],
+          formats: ['es'],
         },
         rollupOptions: {
           // External packages that should not be bundled into your library.
@@ -186,7 +186,7 @@ export const buildOption = `
         fileName: 'index',
         // Change this to the formats you want to support.
         // Don't forget to update your package.json as well.
-        formats: ['es', 'cjs']
+        formats: ['es']
       },
       rollupOptions: {
         // External packages that should not be bundled into your library.
@@ -198,7 +198,7 @@ export const buildOptionObject = {
     entry: 'src/index.ts',
     name: 'my-app',
     fileName: 'index',
-    formats: ['es', 'cjs'],
+    formats: ['es'],
   },
   rollupOptions: {
     external: ['react', 'react-dom', 'react/jsx-runtime'],
diff --git a/packages/vite/src/utils/vite-config-edit-utils.spec.ts b/packages/vite/src/utils/vite-config-edit-utils.spec.ts
index 2529eae2dd7e2..1e52b3cb6372c 100644
--- a/packages/vite/src/utils/vite-config-edit-utils.spec.ts
+++ b/packages/vite/src/utils/vite-config-edit-utils.spec.ts
@@ -66,7 +66,7 @@ describe('ensureViteConfigIsCorrect', () => {
               fileName: 'index',
               // Change this to the formats you want to support.
               // Don't forget to update your package.json as well.
-              formats: ['es', 'cjs']
+              formats: ['es']
             },
             rollupOptions: {
               // External packages that should not be bundled into your library.
@@ -126,7 +126,7 @@ describe('ensureViteConfigIsCorrect', () => {
 
             build: {
           'my': 'option',
-          'lib': {"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es","cjs"]},
+          'lib': {"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es"]},
           'rollupOptions': {"external":["react","react-dom","react/jsx-runtime"]},
         }
 
@@ -176,7 +176,7 @@ describe('ensureViteConfigIsCorrect', () => {
               fileName: 'index',
               // Change this to the formats you want to support.
               // Don't forget to update your package.json as well.
-              formats: ['es', 'cjs']
+              formats: ['es']
             },
             rollupOptions: {
               // External packages that should not be bundled into your library.
@@ -254,7 +254,7 @@ describe('ensureViteConfigIsCorrect', () => {
               fileName: 'index',
               // Change this to the formats you want to support.
               // Don't forget to update your package.json as well.
-              formats: ['es', 'cjs']
+              formats: ['es']
             },
             rollupOptions: {
               // External packages that should not be bundled into your library.
@@ -326,7 +326,7 @@ describe('ensureViteConfigIsCorrect', () => {
                 fileName: 'index',
                 // Change this to the formats you want to support.
                 // Don't forget to update your package.json as well.
-                formats: ['es', 'cjs'],
+                formats: ['es'],
               },
               rollupOptions: {
                 // External packages that should not be bundled into your library.
@@ -379,7 +379,7 @@ describe('ensureViteConfigIsCorrect', () => {
               fileName: 'index',
               // Change this to the formats you want to support.
               // Don't forget to update your package.json as well.
-              formats: ['es', 'cjs']
+              formats: ['es']
             },
             rollupOptions: {
               // External packages that should not be bundled into your library.
@@ -433,7 +433,7 @@ describe('ensureViteConfigIsCorrect', () => {
 
             build: {
           'my': 'option',
-          'lib': {"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es","cjs"]},
+          'lib': {"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es"]},
           'rollupOptions': {"external":["react","react-dom","react/jsx-runtime"]},
         }
 
diff --git a/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap
index d8604c13d8c5e..0981da1f57e59 100644
--- a/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap
+++ b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap
@@ -41,7 +41,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
@@ -132,7 +132,7 @@ export default defineConfig({
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.