feat(bundling): upgrade rollup to v4 (#22656)

nrwl · Apr 19, 2024 · 5e08b15 · 5e08b15
1 parent 091e48f
commit 5e08b15
Show file tree

Hide file tree

Showing 10 changed files with 616 additions and 689 deletions.
diff --git a/e2e/rollup/src/rollup.test.ts b/e2e/rollup/src/rollup.test.ts
@@ -2,6 +2,7 @@ import {
   checkFilesExist,
   cleanupProject,
   newProject,
+  packageInstall,
   readJson,
   rmDist,
   runCLI,
@@ -164,6 +165,11 @@ describe('Rollup Plugin', () => {
 
   it('should build correctly with crystal', () => {
     // ARRANGE
+    packageInstall('@rollup/plugin-babel', undefined, '5.3.0', 'prod');
+    packageInstall('@rollup/plugin-commonjs', undefined, '25.0.7', 'prod');
+    packageInstall('rollup-plugin-typescript2', undefined, '0.36.0', 'prod');
+    runCLI(`generate @nx/js:init --no-interactive`);
+    runCLI(`generate @nx/rollup:init --no-interactive`);
     updateFile(
       `libs/test/src/index.ts`,
       `export function helloWorld() {
@@ -172,8 +178,8 @@ describe('Rollup Plugin', () => {
     );
     updateFile(`libs/test/package.json`, JSON.stringify({ name: 'test' }));
     updateFile(
-      `libs/test/rollup.config.js`,
-      `import babel from '@rollup/plugin-babel';
+      `libs/test/rollup.config.mjs`,
+      `import { babel } from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript2 from 'rollup-plugin-typescript2';
 
@@ -201,9 +207,9 @@ const config = {
 export default config;
 `
     );
+
     // ACT
-    runCLI(`generate @nx/rollup:init --no-interactive`);
-    const output = runCLI(`build test`);
+    const output = runCLI(`build test --verbose`);
 
     // ASSERT
     expect(output).toContain('Successfully ran target build for project test');
@@ -213,7 +219,7 @@ export default config;
 
   it('should support array config from rollup.config.js', () => {
     const jsLib = uniq('jslib');
-    runCLI(`generate @nx/js:lib ${jsLib} --bundler rollup`);
+    runCLI(`generate @nx/js:lib ${jsLib} --bundler rollup --verbose`);
     updateFile(
       `libs/${jsLib}/rollup.config.js`,
       `module.exports = (config) => [{

diff --git a/package.json b/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",

diff --git a/packages/react/plugins/bundle-rollup.ts b/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

diff --git a/packages/react/src/utils/versions.ts b/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';

diff --git a/packages/rollup/migrations.json b/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
+        }
+      }
     }
   }
 }
diff --git a/packages/rollup/package.json b/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"

diff --git a/packages/rollup/src/executors/rollup/rollup.impl.ts b/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 : []),
         ],
       };

diff --git a/packages/rollup/src/plugins/plugin.spec.ts b/packages/rollup/src/plugins/plugin.spec.ts
@@ -2,6 +2,17 @@ import { type CreateNodesContext, joinPathFragments } from '@nx/devkit';
 import { createNodes } from './plugin';
 import { TempFs } from 'nx/src/internal-testing-utils/temp-fs';
 
+// Jest 29 does not support dynamic import() unless --experimental-vm-modules is set.
+// For now, we will mock the loadConfigFile function. We should remove this once we upgrade to Jest 30.
+jest.mock('rollup/loadConfigFile', () => {
+  return {
+    loadConfigFile: jest.fn(),
+  };
+});
+
+// @ts-ignore
+import { loadConfigFile } from 'rollup/loadConfigFile';
+
 describe('@nx/rollup/plugin', () => {
   let createNodesFunction = createNodes[1];
   let context: CreateNodesContext;
@@ -35,29 +46,18 @@ describe('@nx/rollup/plugin', () => {
       console.log("hello world");
       }`
       );
-      tempFs.createFileSync(
-        'rollup.config.js',
-        `
-const config = {
-  input: 'src/index.js',
-  output: [
-    {
-      file: 'dist/bundle.js',
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: 'dist/bundle.es.js',
-      format: 'es',
-      sourcemap: true
-    }
-  ],
-  plugins: [],
-};
-
-module.exports = config;
-      `
-      );
+
+      loadConfigFile.mockReturnValue({
+        options: [
+          {
+            output: {
+              file: 'dist/bundle.js',
+              format: 'cjs',
+              sourcemap: true,
+            },
+          },
+        ],
+      });
 
       process.chdir(tempFs.tempDir);
     });
@@ -82,6 +82,7 @@ module.exports = config;
       expect(nodes).toMatchSnapshot();
     });
   });
+
   describe('non-root project', () => {
     const tempFs = new TempFs('test');
 
@@ -107,29 +108,24 @@ module.exports = config;
       console.log("hello world");
       }`
       );
-      tempFs.createFileSync(
-        'mylib/rollup.config.js',
-        `
-const config = {
-  input: 'src/index.js',
-  output: [
-    {
-      file: 'build/bundle.js',
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: 'dist/bundle.es.js',
-      format: 'es',
-      sourcemap: true
-    }
-  ],
-  plugins: [],
-};
-
-module.exports = config;
-      `
-      );
+      loadConfigFile.mockReturnValue({
+        options: [
+          {
+            output: {
+              file: 'build/bundle.js',
+              format: 'cjs',
+              sourcemap: true,
+            },
+          },
+          {
+            output: {
+              file: 'dist/bundle.es.js',
+              format: 'es',
+              sourcemap: true,
+            },
+          },
+        ],
+      });
 
       process.chdir(tempFs.tempDir);
     });

diff --git a/packages/rollup/src/plugins/plugin.ts b/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() : {};