feat(rollup): use .cjs file extension for config files (#29196)

The `rollup.config.js` file will be resolved as ESM if the closest
`package.json` has `type: 'module`. This causes an error when computing
the project graph and when reading the file for builds.

```
  Original error: require is not defined in ES module scope, you can use import instead
```

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

This PR also updates the output directory to `{projectRoot}/dist` for
the new TS setup.

## Current Behavior
`nx g @nx/react:lib --bundler=rollup` has an error due to Node
resolution

## Expected Behavior
`nx g @nx/react:lib --bundler=rollup` works out of the box

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

Fixes #29193, #[29195](https://github.com/nrwl/nx/issues/29195)

---------

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>

e2e/react/src/react-package.test.ts

@@ -95,7 +95,7 @@ describe('Build React libraries and apps', () => {
 
     // Add assets to child lib
     updateFile(
-      join('libs', childLib, 'rollup.config.js'),
+      join('libs', childLib, 'rollup.config.cjs'),
       `const { withNx } = require('@nx/rollup/with-nx');
 module.exports = withNx(
   {

e2e/rollup/src/rollup-legacy.test.ts

@@ -185,13 +185,13 @@ describe('Rollup Plugin', () => {
     checkFilesExist(`dist/test/index.mjs.js`);
   });
 
-  it('should support array config from rollup.config.js', () => {
+  it('should support array config from rollup.config.cjs', () => {
     const jsLib = uniq('jslib');
     runCLI(
       `generate @nx/js:lib ${jsLib} --directory=libs/${jsLib} --bundler rollup --verbose`
     );
     updateFile(
-      `libs/${jsLib}/rollup.config.js`,
+      `libs/${jsLib}/rollup.config.cjs`,
       `module.exports = (config) => [{
         ...config,
         output: {
@@ -204,7 +204,7 @@ describe('Rollup Plugin', () => {
       }]`
     );
     updateJson(join('libs', jsLib, 'project.json'), (config) => {
-      config.targets.build.options.rollupConfig = `libs/${jsLib}/rollup.config.js`;
+      config.targets.build.options.rollupConfig = `libs/${jsLib}/rollup.config.cjs`;
       return config;
     });
 
@@ -219,7 +219,7 @@ describe('Rollup Plugin', () => {
       `generate @nx/js:lib ${jsLib} --directory=libs/${jsLib} --bundler rollup --verbose`
     );
     updateFile(
-      `libs/${jsLib}/rollup.config.js`,
+      `libs/${jsLib}/rollup.config.cjs`,
       `module.exports = (config) => ({
         ...config,
         // Filter out the plugin, but the @nx/rollup:rollup executor should add it back
@@ -227,7 +227,7 @@ describe('Rollup Plugin', () => {
       })`
     );
     updateJson(join('libs', jsLib, 'project.json'), (config) => {
-      config.targets.build.options.rollupConfig = `libs/${jsLib}/rollup.config.js`;
+      config.targets.build.options.rollupConfig = `libs/${jsLib}/rollup.config.cjs`;
       return config;
     });
 

e2e/rollup/src/rollup.test.ts

@@ -27,7 +27,7 @@ describe('Rollup Plugin', () => {
       `generate @nx/rollup:configuration ${myPkg} --tsConfig=./tsconfig.lib.json --main=./src/index.ts`
     );
     updateFile(
-      `libs/${myPkg}/rollup.config.js`,
+      `libs/${myPkg}/rollup.config.cjs`,
       `
       const { withNx } = require('@nx/rollup/with-nx');
       module.exports =  withNx({
@@ -61,7 +61,7 @@ describe('Rollup Plugin', () => {
       `generate @nx/rollup:configuration ${myPkg} --tsConfig=./tsconfig.lib.json --main=./src/index.ts --compiler=swc`
     );
     updateFile(
-      `libs/${myPkg}/rollup.config.js`,
+      `libs/${myPkg}/rollup.config.cjs`,
       `
       const { withNx } = require('@nx/rollup/with-nx');
       module.exports =  withNx({
@@ -85,7 +85,7 @@ describe('Rollup Plugin', () => {
       `generate @nx/rollup:configuration ${myPkg} --tsConfig=./tsconfig.lib.json --main=./src/index.ts --compiler=tsc`
     );
     updateFile(
-      `libs/${myPkg}/rollup.config.js`,
+      `libs/${myPkg}/rollup.config.cjs`,
       `
       const { withNx } = require('@nx/rollup/with-nx');
       module.exports =  withNx({
@@ -114,7 +114,7 @@ describe('Rollup Plugin', () => {
       `generate @nx/rollup:configuration ${myPkg} --tsConfig=./tsconfig.lib.json --main=./src/index.ts --compiler=tsc`
     );
     updateFile(
-      `libs/${myPkg}/rollup.config.js`,
+      `libs/${myPkg}/rollup.config.cjs`,
       `
       const { withNx } = require('@nx/rollup/with-nx');
       module.exports =  withNx({

packages/js/src/generators/setup-build/generator.spec.ts

@@ -138,7 +138,7 @@ describe('setup-build generator', () => {
       bundler: 'rollup',
     });
 
-    expect(tree.exists('packages/mypkg/rollup.config.js')).toBe(true);
+    expect(tree.exists('packages/mypkg/rollup.config.cjs')).toBe(true);
   });
 
   it('should support --bundler=esbuild', async () => {

packages/react/plugins/bundle-rollup.ts

@@ -1,8 +1,8 @@
 import * as rollup from 'rollup';
 
-// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.js files.
+// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.cjs files.
 /**
- * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.js file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.js file if it does not exist.
+ * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.cjs file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.cjs file if it does not exist.
  */
 function getRollupOptions(options: rollup.RollupOptions) {
   const extraGlobals = {

packages/react/src/generators/library/lib/add-rollup-build-target.ts

@@ -8,7 +8,6 @@ import {
   readNxJson,
   readProjectConfiguration,
   runTasksInSerial,
-  stripIndents,
   updateProjectConfiguration,
 } from '@nx/devkit';
 
@@ -69,38 +68,43 @@ export async function addRollupBuildTarget(
   if (hasRollupPlugin) {
     // New behavior, using rollup config file and inferred target.
     host.write(
-      joinPathFragments(options.projectRoot, 'rollup.config.js'),
+      joinPathFragments(options.projectRoot, 'rollup.config.cjs'),
-      stripIndents`
+      `const { withNx } = require('@nx/rollup/with-nx');
-      const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
-      const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
-      const svg = require('@svgr/rollup');
+
-      
+module.exports = withNx(
-      module.exports = withNx({
+  {
-        main: '${maybeJs(options, './src/index.ts')}',
+    main: '${maybeJs(options, './src/index.ts')}',
-        outputPath: '${joinPathFragments(
+    outputPath: '${
-          offsetFromRoot(options.projectRoot),
+      options.isUsingTsSolutionConfig
-          'dist',
+        ? './dist'
-          options.projectRoot
+        : joinPathFragments(
-        )}',
+            offsetFromRoot(options.projectRoot),
-        tsConfig: './tsconfig.lib.json',
+            'dist',
-        compiler: '${options.compiler ?? 'babel'}',
+            options.projectRoot
-        external: ${JSON.stringify(external)},
+          )
-        format: ['esm'],
+    }',
-        assets:[{ input: '.', output: '.', glob: 'README.md'}],
+    tsConfig: './tsconfig.lib.json',
-      }, {
+    compiler: '${options.compiler ?? 'babel'}',
-        // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    external: ${JSON.stringify(external)},
-        plugins: [
+    format: ['esm'],
-          svg({
+    assets:[{ input: '.', output: '.', glob: 'README.md'}],
-            svgo: false,
+  }, {
-            titleProp: true,
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
-            ref: true,
+    plugins: [
-          }),
+      svg({
-          url({
+        svgo: false,
-            limit: 10000, // 10kB
+        titleProp: true,
-          }),
+        ref: true,
-        ],
+      }),
-      });
+      url({
-    `
+        limit: 10000, // 10kB
+      }),
+    ],
+  }
+);
+`
     );
   } else {
     // Legacy behavior, there is a target in project.json using rollup executor.

packages/react/src/generators/library/library.spec.ts

@@ -517,7 +517,37 @@ describe('lib', () => {
         buildable: true,
       });
 
-      expect(tree.exists('my-lib/rollup.config.js')).toBeTruthy();
+      expect(tree.read('my-lib/rollup.config.cjs', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "const { withNx } = require('@nx/rollup/with-nx');
+        const url = require('@rollup/plugin-url');
+        const svg = require('@svgr/rollup');
+
+        module.exports = withNx(
+          {
+            main: './src/index.ts',
+            outputPath: '../dist/my-lib',
+            tsConfig: './tsconfig.lib.json',
+            compiler: 'babel',
+            external: ["react","react-dom","react/jsx-runtime"],
+            format: ['esm'],
+            assets:[{ input: '.', output: '.', glob: 'README.md'}],
+          }, {
+            // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+            plugins: [
+              svg({
+                svgo: false,
+                titleProp: true,
+                ref: true,
+              }),
+              url({
+                limit: 10000, // 10kB
+              }),
+            ],
+          }
+        );
+        "
+      `);
     });
   });
 
@@ -558,7 +588,7 @@ describe('lib', () => {
         importPath: '@proj/my-lib',
       });
 
-      expect(tree.read('my-lib/rollup.config.js', 'utf-8'))
+      expect(tree.read('my-lib/rollup.config.cjs', 'utf-8'))
         .toEqual(`const { withNx } = require('@nx/rollup/with-nx');
 const url = require('@rollup/plugin-url');
 const svg = require('@svgr/rollup');
@@ -906,6 +936,59 @@ module.exports = withNx(
         name: 'mylib',
       });
 
+      expect(tree.read('mylib/vite.config.ts', 'utf-8')).toMatchInlineSnapshot(`
+        "/// <reference types='vitest' />
+        import { defineConfig } from 'vite';
+        import react from '@vitejs/plugin-react';
+        import dts from 'vite-plugin-dts';
+        import * as path from 'path';
+
+        export default defineConfig({
+          root: __dirname,
+          cacheDir: '../node_modules/.vite/mylib',
+          plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+          // Uncomment this if you are using workers.
+          // worker: {
+          //  plugins: [ nxViteTsPaths() ],
+          // },
+          // Configuration for building your library.
+          // See: https://vitejs.dev/guide/build.html#library-mode
+          build: {
+            outDir: './dist',
+            emptyOutDir: true,
+            reportCompressedSize: true,
+            commonjsOptions: {
+              transformMixedEsModules: true,
+            },
+            lib: {
+              // Could also be a dictionary or array of multiple entry points.
+              entry: 'src/index.ts',
+              name: 'mylib',
+              fileName: 'index',
+              // Change this to the formats you want to support.
+              // Don't forget to update your package.json as well.
+              formats: ['es', 'cjs']
+            },
+            rollupOptions: {
+              // External packages that should not be bundled into your library.
+              external: ['react','react-dom','react/jsx-runtime']
+            },
+          },
+          test: {
+            watch: false,
+            globals: true,
+            environment: 'jsdom',
+            include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+            reporters: ['default'],
+            coverage: {
+              reportsDirectory: '../coverage/mylib',
+              provider: 'v8',
+            }
+          },
+        });
+        "
+      `);
+
       expect(readJson(tree, 'tsconfig.json').references).toMatchInlineSnapshot(`
         [
           {
@@ -1061,5 +1144,47 @@ module.exports = withNx(
         }
       `);
     });
+
+    it('should configure rollup correctly', async () => {
+      await libraryGenerator(tree, {
+        ...defaultSchema,
+        bundler: 'rollup',
+        unitTestRunner: 'none',
+        directory: 'mylib',
+        name: 'mylib',
+      });
+
+      expect(tree.read('mylib/rollup.config.cjs', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "const { withNx } = require('@nx/rollup/with-nx');
+        const url = require('@rollup/plugin-url');
+        const svg = require('@svgr/rollup');
+
+        module.exports = withNx(
+          {
+            main: './src/index.ts',
+            outputPath: './dist',
+            tsConfig: './tsconfig.lib.json',
+            compiler: 'babel',
+            external: ["react","react-dom","react/jsx-runtime"],
+            format: ['esm'],
+            assets:[{ input: '.', output: '.', glob: 'README.md'}],
+          }, {
+            // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+            plugins: [
+              svg({
+                svgo: false,
+                titleProp: true,
+                ref: true,
+              }),
+              url({
+                limit: 10000, // 10kB
+              }),
+            ],
+          }
+        );
+        "
+      `);
+    });
   });
 });

packages/rollup/src/generators/configuration/configuration.spec.ts

@@ -59,7 +59,7 @@ describe('configurationGenerator', () => {
       main: './libs/mypkg/src/index.ts',
     });
 
-    const rollupConfig = tree.read('libs/mypkg/rollup.config.js', 'utf-8');
+    const rollupConfig = tree.read('libs/mypkg/rollup.config.cjs', 'utf-8');
 
     expect(rollupConfig)
       .toEqual(`const { withNx } = require('@nx/rollup/with-nx');
@@ -88,7 +88,7 @@ module.exports = withNx(
       tsConfig: 'libs/mypkg/tsconfig.custom.json',
     });
 
-    const rollupConfig = tree.read('libs/mypkg/rollup.config.js', 'utf-8');
+    const rollupConfig = tree.read('libs/mypkg/rollup.config.cjs', 'utf-8');
 
     expect(rollupConfig)
       .toEqual(`const { withNx } = require('@nx/rollup/with-nx');

packages/rollup/src/generators/configuration/configuration.ts

@@ -99,7 +99,7 @@ function createRollupConfig(
   };
 
   tree.write(
-    joinPathFragments(project.root, 'rollup.config.js'),
+    joinPathFragments(project.root, 'rollup.config.cjs'),
     `const { withNx } = require('@nx/rollup/with-nx');
 
 module.exports = withNx(

packages/rollup/src/generators/convert-to-inferred/convert-to-inferred.spec.ts

@@ -100,7 +100,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
           include: [`${project.root}/**/*`],
         },
       ]);
-      expect(tree.read('mypkg/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -124,8 +124,8 @@ describe('Rollup - Convert Executors To Plugin', () => {
         module.exports = config;
         "
       `);
-      expect(tree.exists('otherpkg1/rollup.config.js')).toBe(false);
+      expect(tree.exists('otherpkg1/rollup.config.cjs')).toBe(false);
-      expect(tree.exists('otherpkg2/rollup.config.js')).toBe(false);
+      expect(tree.exists('otherpkg2/rollup.config.cjs')).toBe(false);
       expect(readProjectConfiguration(tree, project.name).targets).toEqual({});
     });
 
@@ -187,7 +187,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
         project: projectWithMultipleConfigsAndEntries.name,
       });
 
-      expect(tree.read('mypkg1/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg1/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -213,7 +213,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
         module.exports = config;
         "
       `);
-      expect(tree.read('mypkg2/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg2/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -254,31 +254,31 @@ describe('Rollup - Convert Executors To Plugin', () => {
       ).toEqual({});
     });
 
-    it('should handle conflicts with existing rollup.config.js file', async () => {
+    it('should handle conflicts with existing rollup.config.cjs file', async () => {
       const project = createProject(tree, {
         name: 'mypkg1',
         root: 'mypkg1',
         targetOptions: {
           rollupConfig: [
-            'mypkg1/rollup.config.js',
+            'mypkg1/rollup.config.cjs',
             'mypkg1/rollup.other.config.js',
           ],
         },
       });
       tree.write(
-        'mypkg1/rollup.config.js',
+        'mypkg1/rollup.config.cjs',
         '// existing config\nmodule.exports = {};'
       );
 
       await convertToInferred(tree, { project: project.name });
 
-      expect(tree.read('mypkg1/rollup.migrated.config.js', 'utf-8'))
+      expect(tree.read('mypkg1/rollup.migrated.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "// existing config
         module.exports = {};
         "
       `);
-      expect(tree.read('mypkg1/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg1/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -299,7 +299,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
           // output: { sourcemap: true },
         });
 
-        config = require('./rollup.migrated.config.js')(config, options);
+        config = require('./rollup.migrated.config.cjs')(config, options);
         config = require('./rollup.other.config.js')(config, options);
 
         module.exports = config;
@@ -422,7 +422,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
 
       await convertToInferred(tree, { project: project.name });
 
-      expect(tree.read('mypkg/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -521,7 +521,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
         readProjectConfiguration(tree, project.name).targets.build.cache
       ).toBe(true);
       // Plugin options are read from targetDefaults since they were missing in project.json
-      expect(tree.read('mypkg1/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg1/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -574,7 +574,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
           plugin: '@nx/rollup/plugin',
         },
       ]);
-      expect(tree.read('mypkg/rollup.config.js', 'utf-8'))
+      expect(tree.read('mypkg/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -599,8 +599,8 @@ describe('Rollup - Convert Executors To Plugin', () => {
         module.exports = config;
         "
       `);
-      expect(tree.exists('otherpkg1/rollup.config.js')).toBe(false);
+      expect(tree.exists('otherpkg1/rollup.config.cjs')).toBe(false);
-      expect(tree.exists('otherpkg2/rollup.config.js')).toBe(false);
+      expect(tree.exists('otherpkg2/rollup.config.cjs')).toBe(false);
       expect(readProjectConfiguration(tree, project.name).targets).toEqual({});
     });
   });
@@ -623,7 +623,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
 
       await convertToInferred(tree, {});
 
-      expect(tree.read('pkg1/rollup.config.js', 'utf-8'))
+      expect(tree.read('pkg1/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -647,7 +647,7 @@ describe('Rollup - Convert Executors To Plugin', () => {
         module.exports = config;
         "
       `);
-      expect(tree.read('pkg2/rollup.config.js', 'utf-8'))
+      expect(tree.read('pkg2/rollup.config.cjs', 'utf-8'))
         .toMatchInlineSnapshot(`
         "const { withNx } = require('@nx/rollup/with-nx');
 

packages/rollup/src/generators/convert-to-inferred/convert-to-inferred.ts

@@ -79,10 +79,10 @@ export async function convertToInferred(tree: Tree, options: Schema) {
         (target.outputs[0] === '{options.outputPath}' ||
           target.outputs[0] === '{workspaceRoot}/{options.outputPath}')
       ) {
-        // If only the default `options.outputPath` is set as output, remove it and use path inferred from `rollup.config.js`.
+        // If only the default `options.outputPath` is set as output, remove it and use path inferred from `rollup.config.cjs`.
         delete target.outputs;
       } else {
-        // Otherwise, replace `options.outputPath` with what is inferred from `rollup.config.js`.
+        // Otherwise, replace `options.outputPath` with what is inferred from `rollup.config.cjs`.
         target.outputs = target.outputs.map((output) =>
           // Again, "{projectRoot}/{options.outputPath}" is an invalid output for Rollup.
           output === '{options.outputPath}' ||

packages/rollup/src/generators/convert-to-inferred/lib/extract-rollup-config-from-executor-options.spec.ts

@@ -4,6 +4,71 @@ import { extractRollupConfigFromExecutorOptions } from './extract-rollup-config-
 
 describe('extract-rollup-config-from-executor-options', () => {
   it('should extract the options correctly', () => {
+    // ARRANGE
+    const tree = createTreeWithEmptyWorkspace();
+    tree.write(
+      `apps/myapp/rollup.config.cjs`,
+      `export default (config) => {return config;}`
+    );
+    // ACT
+    const defaultValues = extractRollupConfigFromExecutorOptions(
+      tree,
+      {
+        outputPath: 'dist/apps/myapp',
+        tsConfig: 'apps/myapp/tsconfig.json',
+        project: '',
+        main: 'src/lib/index.ts',
+        rollupConfig: 'apps/myapp/rollup.config.cjs',
+        watch: true,
+        format: ['esm', 'cjs'],
+      },
+      {},
+      'apps/myapp'
+    );
+
+    // ASSERT
+    const configFile = tree.read('apps/myapp/rollup.config.cjs', 'utf-8');
+    expect(configFile).toMatchInlineSnapshot(`
+      "const { withNx } = require('@nx/rollup/with-nx');
+
+      // These options were migrated by @nx/rollup:convert-to-inferred from project.json
+      const options = {
+      "outputPath": "../../dist/apps/myapp",
+      "tsConfig": "./tsconfig.json",
+      "project": "",
+      "main": "../../src/lib/index.ts",
+      "format": [
+      "esm",
+      "cjs"
+      ]
+      };
+
+      let config = withNx(options, {
+      // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+      // e.g.
+      // output: { sourcemap: true },
+      });
+
+      config = require('./rollup.migrated.config.cjs')(config, options);
+
+      module.exports = config;"
+    `);
+    expect(tree.exists('apps/myapp/rollup.migrated.config.cjs')).toBeTruthy();
+    expect(defaultValues).toMatchInlineSnapshot(`
+      {
+        "format": [
+          "esm",
+          "cjs",
+        ],
+        "main": "../../src/lib/index.ts",
+        "outputPath": "../../dist/apps/myapp",
+        "project": "",
+        "tsConfig": "./tsconfig.json",
+      }
+    `);
+  });
+
+  it('should extract the options correctly (rollup.config.js)', () => {
     // ARRANGE
     const tree = createTreeWithEmptyWorkspace();
     tree.write(
@@ -27,7 +92,7 @@ describe('extract-rollup-config-from-executor-options', () => {
     );
 
     // ASSERT
-    const configFile = tree.read('apps/myapp/rollup.config.js', 'utf-8');
+    const configFile = tree.read('apps/myapp/rollup.config.cjs', 'utf-8');
     expect(configFile).toMatchInlineSnapshot(`
       "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -68,11 +133,11 @@ describe('extract-rollup-config-from-executor-options', () => {
     `);
   });
 
-  it('should extract configurations that do not defined a rollupConfig into the rollup.config.js file', () => {
+  it('should extract configurations that do not defined a rollupConfig into the rollup.config.cjs file', () => {
     // ARRANGE
     const tree = createTreeWithEmptyWorkspace();
     tree.write(
-      `apps/myapp/rollup.config.js`,
+      `apps/myapp/rollup.config.cjs`,
       `export default (config) => {return config;}`
     );
     tree.write(
@@ -87,7 +152,7 @@ describe('extract-rollup-config-from-executor-options', () => {
         tsConfig: 'apps/myapp/tsconfig.json',
         project: '',
         main: 'src/lib/index.ts',
-        rollupConfig: 'apps/myapp/rollup.config.js',
+        rollupConfig: 'apps/myapp/rollup.config.cjs',
         watch: true,
         format: ['esm', 'cjs'],
       },
@@ -100,7 +165,7 @@ describe('extract-rollup-config-from-executor-options', () => {
     );
 
     // ASSERT
-    const configFile = tree.read('apps/myapp/rollup.config.js', 'utf-8');
+    const configFile = tree.read('apps/myapp/rollup.config.cjs', 'utf-8');
     expect(configFile).toMatchInlineSnapshot(`
       "const { withNx } = require('@nx/rollup/with-nx');
 
@@ -137,11 +202,11 @@ describe('extract-rollup-config-from-executor-options', () => {
       // output: { sourcemap: true },
       });
 
-      config = require('./rollup.migrated.config.js')(config, options);
+      config = require('./rollup.migrated.config.cjs')(config, options);
 
       module.exports = config;"
     `);
-    expect(tree.exists('apps/myapp/rollup.migrated.config.js')).toBeTruthy();
+    expect(tree.exists('apps/myapp/rollup.migrated.config.cjs')).toBeTruthy();
     expect(defaultValues).toMatchInlineSnapshot(`
       {
         "format": [
@@ -160,7 +225,7 @@ describe('extract-rollup-config-from-executor-options', () => {
     // ARRANGE
     const tree = createTreeWithEmptyWorkspace();
     tree.write(
-      `apps/myapp/rollup.config.js`,
+      `apps/myapp/rollup.config.cjs`,
       `export default (config) => {return config;}`
     );
     tree.write(
@@ -175,7 +240,7 @@ describe('extract-rollup-config-from-executor-options', () => {
         tsConfig: 'apps/myapp/tsconfig.json',
         project: '',
         main: 'src/lib/index.ts',
-        rollupConfig: 'apps/myapp/rollup.config.js',
+        rollupConfig: 'apps/myapp/rollup.config.cjs',
         watch: true,
         format: ['esm', 'cjs'],
       },

packages/rollup/src/generators/convert-to-inferred/lib/extract-rollup-config-from-executor-options.ts

@@ -26,9 +26,16 @@ export function extractRollupConfigFromExecutorOptions(
     : [];
   delete options.rollupConfig;
 
-  // Resolve conflict with rollup.config.js if it exists.
+  // Resolve conflict with rollup.config.cjs or rollup.config.js if they exist.
   for (let i = 0; i < oldRollupConfig.length; i++) {
     const file = oldRollupConfig[i];
+    if (file === './rollup.config.cjs') {
+      tree.rename(
+        joinPathFragments(projectRoot, 'rollup.config.cjs'),
+        joinPathFragments(projectRoot, `rollup.migrated.config.cjs`)
+      );
+      oldRollupConfig.splice(i, 1, './rollup.migrated.config.cjs');
+    }
     if (file === './rollup.config.js') {
       tree.rename(
         joinPathFragments(projectRoot, 'rollup.config.js'),
@@ -116,7 +123,7 @@ export function extractRollupConfigFromExecutorOptions(
   }
 
   tree.write(
-    joinPathFragments(projectRoot, `rollup.config.js`),
+    joinPathFragments(projectRoot, `rollup.config.cjs`),
     createNewRollupConfig(oldRollupConfig, defaultOptions, configurationOptions)
   );
 

packages/rollup/src/plugins/__snapshots__/plugin.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`@nx/rollup/plugin non-root project should create nodes 1`] = `
 [
   [
-    "mylib/rollup.config.js",
+    "mylib/rollup.config.cjs",
     {
       "projects": {
         "mylib": {
@@ -11,7 +11,7 @@ exports[`@nx/rollup/plugin non-root project should create nodes 1`] = `
           "targets": {
             "build": {
               "cache": true,
-              "command": "rollup -c rollup.config.js",
+              "command": "rollup -c rollup.config.cjs",
               "dependsOn": [
                 "^build",
               ],
@@ -58,7 +58,7 @@ exports[`@nx/rollup/plugin non-root project should create nodes 1`] = `
 exports[`@nx/rollup/plugin root project should create nodes 1`] = `
 [
   [
-    "rollup.config.js",
+    "rollup.config.cjs",
     {
       "projects": {
         ".": {
@@ -66,7 +66,7 @@ exports[`@nx/rollup/plugin root project should create nodes 1`] = `
           "targets": {
             "build": {
               "cache": true,
-              "command": "rollup -c rollup.config.js",
+              "command": "rollup -c rollup.config.cjs",
               "dependsOn": [
                 "^build",
               ],

packages/rollup/src/plugins/plugin.spec.ts

@@ -51,7 +51,7 @@ describe('@nx/rollup/plugin', () => {
       // is that the hash is different after updating the
       // config file. The actual config read is mocked below.
       tempFs.createFileSync(
-        'rollup.config.js',
+        'rollup.config.cjs',
         JSON.stringify(rollupConfigOptions)
       );
       tempFs.createFileSync('package.json', JSON.stringify({ name: 'mylib' }));
@@ -77,7 +77,7 @@ describe('@nx/rollup/plugin', () => {
     it('should create nodes', async () => {
       // ACT
       const nodes = await createNodesFunction(
-        ['rollup.config.js'],
+        ['rollup.config.cjs'],
         {
           buildTargetName: 'build',
         },
@@ -125,7 +125,7 @@ describe('@nx/rollup/plugin', () => {
       // is that the hash is different after updating the
       // config file. The actual config read is mocked below.
       tempFs.createFileSync(
-        'mylib/rollup.config.js',
+        'mylib/rollup.config.cjs',
         JSON.stringify(rollupConfigOptions)
       );
       tempFs.createFileSync(
@@ -154,7 +154,7 @@ describe('@nx/rollup/plugin', () => {
     it('should create nodes', async () => {
       // ACT
       const nodes = await createNodesFunction(
-        ['mylib/rollup.config.js'],
+        ['mylib/rollup.config.cjs'],
         {
           buildTargetName: 'build',
         },