[OPTIMIZELY] - ERROR crypto$1.randomBytes is not a function

I am using Optimizely Fullstack (browser javascript) through rollup. I notice following error when the experiment is activated in the browser:

[OPTIMIZELY] - ERROR 2022-10-25T01:59:23.886Z crypto$1.randomBytes is not a function :

In the console, I can see the uuid node version was used (not the rng-browser.js)

I tried different settings but leads to no success

If I bundle the project with vite, it works and the rng is using the browser version:

Any idea why rollup not pick the browser version?

Package.json:

{ "private": true, "name": "template", "version": "1.0.0", "jest": { "verbose": true, "coverageDirectory": "./coverage", "coverageThreshold": { "global": { "branches": 30, "functions": 30, "lines": 30, "statements": 30 } } }, "devDependencies": { "@babel/core": "^7.19.3", "@babel/eslint-parser": "^7.19.1", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/preset-env": "^7.19.4", "@babel/preset-typescript": "^7.17.12", "@rollup/plugin-alias": "^4.0.0", "@rollup/plugin-beep": "^1.0.0", "@rollup/plugin-commonjs": "^23.0.0", "@rollup/plugin-html": "^1.0.0", "@rollup/plugin-json": "^5.0.0", "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-replace": "^5.0.0", "@rollup/plugin-typescript": "^9.0.1", "@segment/analytics-next": "^1.44.0", "@sveltejs/vite-plugin-svelte": "^1.0.9", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/svelte": "^3.2.2", "@testing-library/user-event": "^14.4.3", "@tsconfig/recommended": "^1.0.1", "@tsconfig/svelte": "^3.0.0", "@types/chart.js": "^2.9.37", "@types/dinero.js": "^1.6.2", "@types/grecaptcha": "^3.0.4", "@types/inputmask": "^5.0.3", "@types/js-cookie": "^3.0.2", "@types/lodash": "^4.14.186", "@types/node": "^18.8.3", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "@types/react-helmet": "^6.1.5", "@types/testing-libraryjest-dom": "^5.14.5", "@types/uuid": "^8.3.4", "@types/validator": "^13.7.4", "@types/vimeoplayer": "^2.16.3", "@typescript-eslint/eslint-plugin": "^5.30.6", "@typescript-eslint/parser": "^5.30.6", "@vitejs/plugin-react": "^2.1.0", "@vitest/coverage-c8": "^0.24.3", "@xstate/test": "^0.5.0", "autoprefixer": "^10.4.12", "c8": "^7.12.0", "carbon-components-svelte": "^0.60.0", "cssnano": "^5.1.13", "dotenv": "^16.0.3", "eslint": "^8.19.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-svelte3": "^3.4.1", "faker": "^4.1.0", "htmlnano": "^2.0.0", "jsdom": "^20.0.1", "less": "^4.1.3", "msw": "^0.47.4", "npm-run-all": "^4.1.5", "openapi-types": "^12.0.2", "postcss": "^8.4.18", "postcss-easings": "^3.0.1", "postcss-import": "^15.0.0", "postcss-preset-env": "^7.8.2", "posthtml": "^0.16.6", "posthtml-hash": "^1.2.2", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", "resize-observer-polyfill": "^1.5.1", "rimraf": "^3.0.2", "rollup": "^3.2.3", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-visualizer": "^5.8.3", "sass": "^1.55.0", "svelte": "^3.52.0", "svelte-check": "^2.9.2", "svelte-preprocess": "^4.10.7", "tailwindcss": "^3.1.8", "terser": "^5.15.1", "tslib": "^2.4.0", "typed-css-modules": "^0.7.2", "typed-scss-modules": "^7.0.1", "typescript": "^4.8.4", "vite": "^3.1.8", "vitest": "^0.24.3" }, "dependencies": { "@datadog/browser-logs": "^4.21.2", "@datadog/browser-rum": "^4.21.2", "@floating-ui/dom": "^1.0.2", "@floating-ui/react-dom": "^1.0.0", "@floating-ui/react-dom-interactions": "^0.10.1", "@fortawesome/fontawesome-pro": "^6.2.0", "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-brands-svg-icons": "^6.2.0", "@fortawesome/pro-light-svg-icons": "^6.2.0", "@fortawesome/pro-regular-svg-icons": "^6.2.0", "@fortawesome/pro-solid-svg-icons": "^6.2.0", "@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/sharp-solid-svg-icons": "^6.2.0", "@optimizely/js-sdk-utils": "^0.4.0", "@optimizely/optimizely-sdk": "^4.9.2", "@storybook/testing-library": "^0.0.13", "@testing-library/dom": "^8.19.0", "@vimeo/player": "^2.18.0", "@xstate/cli": "^0.1.7", "@xstate/immer": "^0.3.0", "@xstate/react": "^3.0.1", "@xstate/svelte": "^1.0.0", "ahooks": "^3.7.2", "antd": "^4.23.6", "antd-mobile": "^5.24.1", "babel": "^6.23.0", "chart.js": "^3.5.1", "chartjs-adapter-date-fns": "^2.0.0", "concurrently": "^6.4.0", "core-js": "^3.25.5", "cross-fetch": "^3.1.5", "crypto-browserify": "^3.12.0", "date-fns": "^2.23.0", "dayjs": "^1.11.5", "driver.js": "^0.9.8", "ethos-design-system": "github:getethos/ethos-design-system#v1.2.34", "flatpickr": "^4.6.9", "imask": "^6.4.3", "immer": "^9.0.7", "inputmask": "^5.0.7", "js-cookie": "^3.0.1", "lodash": "^4.17.21", "object-assign": "^4.1.1", "path-to-regexp": "^6.2.0", "randombytes": "^2.1.0", "rc-tabs": "^11.16.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet": "^6.1.0", "react-imask": "^6.4.3", "react-router-dom": "^6.4.2", "rollup-plugin-browserify-transform": "^1.0.1", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-globals": "^1.4.0", "sirv-cli": "^2.0.2", "tippy.js": "^6.3.7", "uuid": "^9.0.0", "validator": "^13.7.0", "vest": "^4.5.0", "whatwg-fetch": "^3.6.2", "xlsx": "^0.18.5", "xstate": "^4.33.6" }, "scripts": { "build": "rimraf build && rollup -c rollup.config.csr.mjs", "build:pr": "NODE_ENV=production PARTNER_API_BASE_URL='https://api' CORE_FE_ROOT='https://core-fe' CMS_FE_ROOT='https://cms-fe' API_GATE_WAY_URL='https://api-gateway' run-p build", "build:production": "NODE_ENV=production run-p build", "build:css": "tailwindcss -i src/css/tailwind.css -o public/tailwind.css --minify", "postbuild": "cp -r public build && node postbuild.js", "autobuild": "rollup -c rollup.config.csr.mjs -w", "dev:css": "tailwindcss -i src/css/tailwind.css -o public/tailwind.css --watch", "dev:p": "rimraf public && concurrently \"yarn dev:css\" \"yarn autobuild\"", "dev": "rimraf public && run-p autobuild", "start": "sirv build --single", "start:dev": "sirv public --dev --single", "dev:v": "vite", "build:v": "vite build", "preview:v": "vite preview", "test": "vitest", "test:watch": "vitest watch", "coverage": "vitest --coverage", "lint": "npx eslint \"{,!(node_modules|public)//}*.{js,svelte}\"", "fix": "npx eslint --fix \"{,!(node_modules|public)/*/}.{js,svelte}\"", "validate": "svelte-check", "xstate:typegen": "xstate typegen \"src//*.ts?(x)\"", "xstate:typegen:dev": "xstate typegen \"src//*.ts?(x)\" --watch", "typecss": "tcm -p 'src/*/.module.css' && yarn typed-scss-modules src//*.module.scss --nameFormat all --exportType default" }, "browserslist": [ "defaults" ], "browser": [ "uuid" ] }`

Rollup config:

import alias from '@rollup/plugin-alias' import beep from '@rollup/plugin-beep' import commonjs from '@rollup/plugin-commonjs' import html, { makeHtmlAttributes } from '@rollup/plugin-html' import json from '@rollup/plugin-json' import resolve from '@rollup/plugin-node-resolve' import replace from '@rollup/plugin-replace' import typescript from '@rollup/plugin-typescript' import * as fs from 'fs' import template from 'lodash/template.js' import copy from 'rollup-plugin-copy' import livereload from 'rollup-plugin-livereload' import postcss from 'rollup-plugin-postcss' import svelte from 'rollup-plugin-svelte' import { terser } from 'rollup-plugin-terser' import { visualizer } from 'rollup-plugin-visualizer' import { serve } from './serve.mjs'

import aliasOptions from './rollup.alias.config.js' import replaceOptions from './rollup.replace.config.js' import svelteConfig from './svelte.config.js' import lessOptions from './less.options.js' import globals from 'rollup-plugin-node-globals'; import builtins from 'rollup-plugin-node-builtins';

console.log('--- rollup.config.csr ---') console.log('mode', mode) const production = ['stage', 'production'].includes(mode)

const config = [ { input: 'src/index.ts', output: { // Inline source maps are handy during development due to their speed sourcemap: production ? true : 'inline', format: 'es', name: 'app', dir: 'public', // turns index.js -> index..js entryFileNames: '[name].[hash].js', manualChunks: { react: ['react', 'react-dom'], }, }, preserveEntrySignatures: false, plugins: [ alias(aliasOptions),

  svelte(svelteConfig),

  postcss({
    extract: true,
    minimize: true,
    inject: false,
    use: {
      less: lessOptions,
    },
    extensions: ['.sass', '.scss', '.less', '.css'],
  }),

  replace(replaceOptions),

  resolve({
    browser: true,
    resolveOnly: module => !module.includes('@optimizely/optimizely-sdk/node_moduels/uuid'),
  }),
  commonjs(),
  builtins({crypto: true}),
  globals(),
  typescript({
    tsconfig: './tsconfig.json',
    compilerOptions: {
      sourceMap: production,
    },
  }),

  !production && serve(),

  !production && livereload('public'),

  production && terser(),

  copy({
    targets: [{ src: 'static/**/*', dest: 'public/' }],
    // required to prevent unnecessary copying from reloads during watch mode
    copyOnce: !production,
    // we don't want the plugin to remove directory structure by default
    flatten: false,
  }),

  copy({
    targets: [{ src: 'src/iframe.html', dest: 'public/' }],
    // required to prevent unnecessary copying from reloads during watch mode
    copyOnce: !production,
    // we don't want the plugin to remove directory structure by default
    flatten: false,
  }),

  html({
    publicPath: '/',
    template: ({ attributes, files, publicPath, title }) => {
      let templateFile = fs.readFileSync('src/index.html')

      // This is adapted from the default template function in the HTML plugin.
      const scripts = (files.js || [])
        .map(({ fileName }) => {
          const attrs = makeHtmlAttributes({
            ...attributes.script,
            nonce: production ? '**CSP_NONCE**' : 'rAnd0m123',
          })
          return `<script src="${publicPath}${fileName}"${attrs}></script>`
        })
        .join('\n')

      const stylesheets = (files.css || [])
        .map(({ fileName }) => {
          const attrs = makeHtmlAttributes(attributes.link)
          return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`
        })
        .join('\n')

      const exec = template(templateFile.toString())
      return exec({
        mode,
        attributes,
        title,
        scripts,
        stylesheets,
        BOND_SEGMENT_CLIENT_KEY:
          mode === 'production' ? 'fdhg3J5PV7ClE4kPjVHcg1k3FYSIMOoo' : 'IrQ8o3vZnygSSTaO5RkwwU3F3m3IqDcj',
        CSP_NONCE: production ? '**CSP_NONCE**' : 'rAnd0m123',
        htmlAttributes: makeHtmlAttributes(attributes.html),
      })
    },
  }),

  beep(),
  json({
    compact: true,
  }),

  !production && visualizer(),
],
watch: {
  clearScreen: true,
  include: 'src/**',
},

} ]

export default config

tsconfig.json:

{ "extends": "@tsconfig/svelte/tsconfig.json", "include": ["node_moduels//*", "src/*/.d.ts", "src//*.ts", "src//*.js", "src/*/.svelte", "src//*.jsx", "src/*/.tsx"], "exclude": ["sapper/", "public/", "src/serviceWorker.ts", "/tests//.tsx"], "compilerOptions": { "jsx": "react", "target": "ESNext", "module": "ESNext", "resolveJsonModule": true, "types": ["svelte", "node", "grecaptcha", "vitest/globals"], "typeRoots": ["node_modules/@types", "src/types"], "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "baseUrl": ".", "noEmitOnError": true, "paths": { "actions/": ["src/actions/"], "components/": ["src/components/"], "constants/": ["src/constants/"], "contexts/": ["src/contexts/"], "css/": ["src/css/"], "generated/": ["src/generated/"], "icons/": ["src/icons/"], "machines/": ["src/machines/"], "pages/": ["src/pages/"], "services/": ["src/services/"], "stores/": ["src/stores/"], "transitions/": ["src/transitions/"], "utils/": ["src/utils/"], "framework/": ["src/framework/"], "ui/": ["src/ui/*"], "randombytes": ["node_modules/randombytes"], "crypto": [ "node_modules/crypto-browserify" ], } } }

optimizely / javascript-sdk

[OPTIMIZELY] - ERROR crypto$1.randomBytes is not a function #792