Rollup
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
iife
without code splittingThis 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
)
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 19 days ago