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

@@ -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.

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`
     );

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.

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",
         }
       `);
     });

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: {

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",
         }
       `);
     });

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.

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",
         }

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'],
     });
   }
 

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    },"
       }
       }
     })

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.

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 ?? [],

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'],

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"]},
         }
 

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.