Using OneSDK with Rollup

Suggest Edits

Rollup is a module bundler for JavaScript codebases.

This article describes how to resolve potential build issues when OneSDK is included in a project that uses Rollup. Example configurations are provided at the end of this page.

Built-in Node.js modules

Some transitive dependencies of OneSDK depend on Node.js built-in modules. Rollup requires that these modules are explicitly shimmed if they aren’t provided as a an explicit dependency.

To resolve issues relating to the built-in modules not being found install and configure rollup-plugin-polyfill-node.

Module resolution

The plugin @rollup/plugin-node-resolve has a bug on version 14 that prevents TypeScript projects to resolve browser specific dependencies. This causes a few of our internal dependencies to break (such as the uuid module).

Until this problem is resolved, specify version 13 when installing the @rollup/plugin-node-resolve package:

npm install -D @rollup/plugin-node-resolve@13

Global process.env.NODE_ENV

React relies in the existence of a global process.env.NODE_ENV variable.

Use the @rollup/plugin-replace package to inject it when targeting browsers runtimes.

import commonjs from "@rollup/plugin-commonjs";  
import json from "@rollup/plugin-json";  
import resolve from "@rollup/plugin-node-resolve";  
import typescript from "@rollup/plugin-typescript";  
import html from "rollup-plugin-generate-html-template";  
import external from "rollup-plugin-peer-deps-external";  
import nodePolyfills from 'rollup-plugin-polyfill-node';  
import postcss from "rollup-plugin-postcss";  
import replace from "rollup-plugin-replace";  
import { terser } from "rollup-plugin-terser";

export default {  
  input: "src/index.tsx",  
  output: [  
    {  
      file: "./dist/bundle.js",  
      format: "iife",  
      sourcemap: true,  
      inlineDynamicImports: true,  
    },  
  ],  
  plugins: [  
    replace({  
      'process.env.NODE_ENV': JSON.stringify( 'development' ) // <--  
    }),  
    external(),  
    nodePolyfills(), // <--  
    resolve({ browser: true }),  
    commonjs(),  
    typescript({ tsconfig: "./tsconfig.json" }),  
    json(),  
    postcss(),  
    terser(),  
    html({ template: "src/index.html", target: "index.html" }),  
  ],  
};

Other warnings

Use of eval is strongly discouraged.

This warning comes from an internal library from one of our biometrics providers that uses the eval() function internally.

You can safely ignore this warning.

this has been rewritten to undefined

This warning refers to a known issue. It does not pose any problems and you can safely ignore this warning.

Circular dependencies

This warning is caused by the use of exporting aggregated modules. These aren't expected to be a problem.

Example Rollup configurations

Using iife without code splitting

This configuration generates a single file, bundle.js.

import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import html from "rollup-plugin-generate-html-template";
import nodePolyfills from 'rollup-plugin-polyfill-node';
import replace from "rollup-plugin-replace";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: "./dist/bundle.js",
      format: "iife",
      sourcemap: true,
      inlineDynamicImports: true,
    },
  ],
  plugins: [
    resolve({ browser: true, preferBuiltins: false }),
    commonjs(),
    nodePolyfills(),
    typescript({ tsconfig: "./tsconfig.json" }),
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'development' )
    }),
    json(),
    html({ template: "src/index.html", target: "index.html" }),
  ],
};

using ES modules with code splitting

import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import html from "rollup-plugin-generate-html-template";
import nodePolyfills from 'rollup-plugin-polyfill-node';
import replace from "rollup-plugin-replace";

export default {
  input: "src/index.tsx",
  output: [
    {
      dir: "./dist",
      format: "es",
      sourcemap: true,
      inlineDynamicImports: false,
    },
  ],
  plugins: [
    resolve({ browser: true, preferBuiltins: false }),
    commonjs(),
    nodePolyfills(),
    typescript({ tsconfig: "./tsconfig.json" }),
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'development' )
    }),
    json(),
    html({ template: "src/index.html", target: "index.html", attrs: ["type='module'"] }),
  ],
};

Example TypeScript configuration (tsconfig.js)

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "removeComments": false,
    "outDir": "./dist",
    "sourceMap": true,
    "moduleResolution": "node",
    "jsx": "react",
    "lib": ["DOM", "ESNEXT"],
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "module": "ES2022",
    "target": "ES6",
    "allowJs": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["./dist"],
  "include": ["./src/**/*"]
}

Updated 3 months ago