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 50f92be0fe..ea33782eec 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 ec3d4770dc..fb71af58ad 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 cd3143bed9..42382d282f 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 be64729621..7e5b1cef16 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 cfa3e4832c..5946f36767 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 655e546bc1..61e1265aa1 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 d60f1c263f..86c1633d33 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 8fce12d571..2fcaf5cd0a 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 427a5303e8..1d020b00a1 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 3779a195fa..ddde13e973 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 0facc368a6..81921cdcec 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 9b939fa0b4..11e1c436ad 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 4024b32f31..48468c642a 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 2529eae2dd..1e52b3cb63 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 d8604c13d8..0981da1f57 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.