working locally

Author: ricksmith130

.vscode/settings.json

@@ -12,5 +12,8 @@
   },
   "eslint.alwaysShowStatus": true,
   "eslint.workingDirectories": ["src"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
 }

package.json

@@ -1,7 +1,10 @@
 {
   "name": "nhsuk-react-components",
   "version": "5.0.0",
-  "files": ["dist", "lib"],
+  "files": [
+    "dist",
+    "lib"
+  ],
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -31,31 +34,31 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-
     "@babel/core": "^7.24.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "rollup": "^4.13.0",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-
+    "@storybook/addon-essentials": "^8.0.5",
     "@storybook/react": "^8.0.5",
     "@storybook/react-vite": "^8.0.5",
-    "@storybook/addon-essentials": "^8.0.5",
     "@storybook/theming": "^8.0.5",
-
     "@testing-library/react": "^16.3.0",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
-
+    "nhsuk-frontend": "^9.0.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "sass": "^1.53.0",
+    "tslib": "^2.8.1",
     "typescript": "5.3.3",
     "vite": "^4.5.3",
-    "vite-tsconfig-paths": "^4.3.2",
-    "nhsuk-frontend": "^9.0.1",
-    "sass": "^1.53.0"
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "license": "MIT",
   "packageManager": "[email protected]"

rollup.config.mjs

@@ -13,76 +13,76 @@ import packageJson from './package.json' assert { type: 'json' };
 // suppresses warnings printed to console as part of bundling components with directives present.
 const onWarnSuppression = {
   onwarn(warning, warn) {
-    if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes(`"use client"`)) {
-      return;
-    }
+    if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes(`"use client"`)) return;
     warn(warning);
   },
 };
 
-const commonPlugins = [external(), tsPaths(), resolve(), commonjs()];
+// Keep react 19 out of the bundle
+const externals = ['react', 'react-dom', 'react/jsx-runtime'];
+
+const commonPlugins = [
+  external(),            // auto-externalize peer deps
+  tsPaths(),             // respect tsconfig paths in source
+  resolve({ extensions: ['.mjs', '.js', '.ts', '.tsx'] }),
+  commonjs(),
+];
 
 export default [
-  // cjs export
+  // CJS (single file)
   {
     input: 'src/index.ts',
+    external: externals,
     output: [
       {
-        file: packageJson.main,
+        file: packageJson.main, // e.g. dist/cjs/index.js
         format: 'cjs',
         sourcemap: true,
       },
     ],
     plugins: [
       ...commonPlugins,
       typescript({
-        tsconfig: 'bundle-base.tsconfig.json',
-        compilerOptions: {
-          declaration: false,
-        },
+        // IMPORTANT: dedicated build tsconfig (noEmit, no jest/node types)
+        tsconfig: './tsconfig.build.json',
       }),
-      terser(),
+      preserveDirectives(),           // keep "use client" etc.
+      terser({ compress: { directives: false } }),
     ],
     ...onWarnSuppression,
   },
-  // esm export
+
+  // ESM (single file)
   {
     input: 'src/index.ts',
+    external: externals,
     output: [
       {
-        dir: packageJson.module,
+        file: packageJson.module, // e.g. dist/esm/index.js
         format: 'esm',
         sourcemap: true,
-        preserveModules: true,
-        preserveModulesRoot: 'src',
       },
     ],
     plugins: [
       ...commonPlugins,
       typescript({
-        tsconfig: 'bundle-base.tsconfig.json',
-        compilerOptions: {
-          declaration: true,
-          declarationDir: 'dist/esm',
-          emitDeclarationOnly: true,
-          outDir: 'dist/esm',
-        },
+        tsconfig: './tsconfig.build.json',
       }),
       preserveDirectives(),
       terser({ compress: { directives: false } }),
     ],
     ...onWarnSuppression,
   },
-  // type bundling
+
+  // Type definitions (bundled .d.ts)
   {
     input: 'src/index.ts',
+    external: externals,
     output: [{ file: 'dist/index.d.ts', format: 'esm' }],
-    external: [],
     plugins: [
       dts({
-        compilerOptions: {
-          paths: tsBuildConfig.compilerOptions.paths,
-        },
+        // carry over path mapping if you have any
+        compilerOptions: { paths: tsBuildConfig?.compilerOptions?.paths ?? {} },
       }),
     ],
   },

tsconfig.build.json

@@ -0,0 +1,20 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true, // Rollup writes JS; TS only type-checks
+        "declaration": false,
+        "declarationMap": false,
+        "types": [] // avoid pulling jest/node types into the build
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "**/*.test.*",
+        "**/*.spec.*",
+        "**/*.stories.*",
+        "stories",
+        "tests",
+        "jest.config.*"
+    ]
+}

tsconfig.json

@@ -4,9 +4,11 @@
     "target": "es6",
     "module": "esnext",
     "moduleResolution": "node",
-    "declaration": true,
     "baseUrl": "./",
-    "types": ["jest", "node"],
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "types": [],
     "sourceMap": true,
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,