feat(bundling): upgrade rollup to v4

e2e/rollup/src/rollup.test.ts

@@ -164,6 +164,8 @@ describe('Rollup Plugin', () => {
 
   it('should build correctly with crystal', () => {
     // ARRANGE
+    runCLI(`generate @nx/js:init --no-interactive`);
+    runCLI(`generate @nx/rollup:init --no-interactive`);
     updateFile(
       `libs/test/src/index.ts`,
       `export function helloWorld() {
@@ -172,7 +174,7 @@ describe('Rollup Plugin', () => {
     );
     updateFile(`libs/test/package.json`, JSON.stringify({ name: 'test' }));
     updateFile(
-      `libs/test/rollup.config.js`,
+      `libs/test/rollup.config.mjs`,
       `import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript2 from 'rollup-plugin-typescript2';
@@ -201,8 +203,8 @@ const config = {
 export default config;
 `
     );
+
     // ACT
-    runCLI(`generate @nx/rollup:init --no-interactive`);
     const output = runCLI(`build test`);
 
     // ASSERT

package.json

@@ -87,12 +87,12 @@
     "@reduxjs/toolkit": "1.9.0",
     "@remix-run/dev": "^2.8.1",
     "@remix-run/node": "^2.8.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-image": "^2.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-url": "^7.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-url": "^8.0.2",
     "@schematics/angular": "~17.3.0",
     "@side/jest-runtime": "^1.1.0",
     "@storybook/addon-essentials": "7.5.3",
@@ -102,7 +102,7 @@
     "@storybook/react-webpack5": "7.5.3",
     "@storybook/types": "^7.1.1",
     "@supabase/supabase-js": "^2.26.0",
-    "@svgr/rollup": "^8.0.1",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.0.1",
     "@swc-node/register": "1.8.0",
     "@swc/cli": "0.1.62",
@@ -255,11 +255,10 @@
     "react-textarea-autosize": "^8.5.3",
     "regenerator-runtime": "0.13.7",
     "resolve.exports": "1.1.0",
-    "rollup": "^2.56.2",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-typescript2": "0.36.0",
+    "rollup": "^4.14.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rxjs": "^7.8.0",
     "sass": "1.55.0",
     "sass-loader": "^12.2.0",

packages/react/plugins/bundle-rollup.ts

@@ -38,7 +38,7 @@ function getRollupOptions(options: rollup.RollupOptions) {
       url({
         limit: 10000, // 10kB
       }),
-      ...options.plugins,
+      ...(Array.isArray(options.plugins) ? options.plugins : []),
     ];
   } catch {
     // Ignored for React Native

packages/react/src/utils/versions.ts

@@ -61,8 +61,8 @@ export const lessVersion = '3.12.2';
 export const sassVersion = '^1.55.0';
 
 // rollup plugins (if needed)
-export const rollupPluginUrlVersion = '^7.0.0';
-export const svgrRollupVersion = '^8.0.1';
+export const rollupPluginUrlVersion = '^8.0.2';
+export const svgrRollupVersion = '^8.1.0';
 
 export const swcPluginStyledJsxVersion = '^1.5.67';
 export const swcPluginEmotionVersion = '^2.5.67';

packages/rollup/migrations.json

@@ -34,6 +34,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.0.0": {
+      "version": "19.0.0-beta.0",
+      "packages": {
+        "@rollup/plugin-url": {
+          "version": "^8.0.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@svgr/rollup": {
+          "version": "^8.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/rollup/package.json

@@ -29,20 +29,19 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-image": "^2.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "autoprefixer": "^10.4.9",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "chalk": "^4.1.0",
     "postcss": "^8.4.14",
-    "rollup": "^2.56.2",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-typescript2": "0.36.0",
+    "rollup": "^4.14.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "tslib": "^2.3.0",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js"

packages/rollup/src/executors/rollup/rollup.impl.ts

@@ -1,6 +1,5 @@
 import * as ts from 'typescript';
 import * as rollup from 'rollup';
-import * as peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import { getBabelInputPlugin } from '@rollup/plugin-babel';
 import { dirname, join, parse, resolve } from 'path';
 import * as autoprefixer from 'autoprefixer';
@@ -161,7 +160,6 @@ export async function createRollupOptions(
   npmDeps: string[]
 ): Promise<rollup.RollupOptions | rollup.RollupOptions[]> {
   const useBabel = options.compiler === 'babel';
-  const useTsc = options.compiler === 'tsc';
   const useSwc = options.compiler === 'swc';
 
   const tsConfigPath = joinPathFragments(context.root, options.tsConfig);
@@ -214,9 +212,6 @@ export async function createRollupOptions(
       main: options.main,
       projectRoot: options.projectRoot,
     }),
-    peerDepsExternal({
-      packageJsonPath: options.project,
-    }),
     postcss({
       inject: true,
       extract: options.extractCss,
@@ -306,7 +301,10 @@ export async function createRollupOptions(
         ...finalConfig,
         ...config,
         plugins: [
-          ...(finalConfig.plugins?.length > 0 ? finalConfig.plugins : []),
+          ...(Array.isArray(finalConfig.plugins) &&
+          finalConfig.plugins?.length > 0
+            ? finalConfig.plugins
+            : []),
           ...(config.plugins?.length > 0 ? config.plugins : []),
         ],
       };

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

@@ -38,22 +38,23 @@ describe('@nx/rollup/plugin', () => {
       tempFs.createFileSync(
         'rollup.config.js',
         `
-const config = {
+const config = [{
   input: 'src/index.js',
-  output: [
-    {
-      file: 'dist/bundle.js',
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: 'dist/bundle.es.js',
-      format: 'es',
-      sourcemap: true
-    }
-  ],
+  output: {
+    file: 'dist/bundle.js',
+    format: 'cjs',
+    sourcemap: true
+  },
   plugins: [],
-};
+}, {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'cjs',
+    sourcemap: true
+  },
+  plugins: [],
+}];
 
 module.exports = config;
       `
@@ -82,6 +83,7 @@ module.exports = config;
       expect(nodes).toMatchSnapshot();
     });
   });
+
   describe('non-root project', () => {
     const tempFs = new TempFs('test');
 

packages/rollup/src/plugins/plugin.ts

@@ -15,7 +15,10 @@ import { calculateHashForCreateNodes } from '@nx/devkit/src/utils/calculate-hash
 import { getLockFileName } from '@nx/js';
 import { getNamedInputs } from '@nx/devkit/src/utils/get-named-inputs';
 import { type RollupOptions } from 'rollup';
-import * as loadConfigFile from 'rollup/dist/loadConfigFile';
+
+// This import causes an error due to the module resolution used. If we switch to bundler or nodenext in the future we remove this ignore.
+// @ts-ignore
+import { loadConfigFile } from 'rollup/loadConfigFile';
 
 const cachePath = join(projectGraphCacheDirectory, 'rollup.hash');
 const targetsCache = existsSync(cachePath) ? readTargetsCache() : {};