{"id":19327,"library":"babel-preset-razzle","title":"Babel Preset Razzle","description":"Babel preset used by Razzle, a zero-configuration universal JavaScript framework. Current stable version is 4.2.18. It provides a pre-configured set of plugins for React, including JSX, object rest spread, and dynamic import. Designed for server-side rendering (SSR) with automatic environment detection based on BABEL_ENV or NODE_ENV. It ships as a CommonJS module and is not meant to be used outside of Razzle unless you manually configure Babel. Released as part of the Razzle monorepo with updates tied to Razzle releases.","status":"active","version":"4.2.18","language":"javascript","source_language":"en","source_url":"https://github.com/jaredpalmer/razzle","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-razzle","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-razzle","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-razzle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Babel transformation","package":"@babel/core","optional":false},{"reason":"Part of Razzle monorepo; intended to be used with Razzle","package":"razzle","optional":true}],"imports":[{"note":"This preset is a CommonJS module; ESM import is not supported.","wrong":"import preset from 'babel-preset-razzle';","symbol":"default","correct":"module.exports = require('babel-preset-razzle');"},{"note":"In .babelrc, use the short name 'razzle' not the full package name.","wrong":"{\n  \"presets\": [\"babel-preset-razzle\"]\n}","symbol":"babel-preset-razzle","correct":"{\n  \"presets\": [\"razzle\"]\n}"},{"note":"In babel.config.js, exporting an object may cause caching issues; use a function with api.cache() instead.","wrong":"module.exports = {\n  presets: ['razzle']\n};","symbol":"babel.config.js","correct":"module.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: ['razzle']\n  };\n};"}],"quickstart":{"code":"// Install Babel and this preset\n// npm install --save-dev @babel/core babel-preset-razzle\n\n// .babelrc\n{\n  \"presets\": [\n    [\"razzle\", {\n      \"targets\": {\n        \"browsers\": [\"last 2 versions\", \"ie >= 11\"],\n        \"node\": \"current\"\n      },\n      \"modules\": false,\n      \"useBuiltIns\": \"usage\",\n      \"corejs\": 3\n    }]\n  ]\n}\n\n// Example usage with Babel CLI\n// npx babel src --out-dir lib\n\n// This configures the preset for SSR (node) and client (browsers) targets.\n// The preset automatically detects the environment: 'server' for NODE_ENV=production with BABEL_ENV=server, else 'client'.\n// Use BABEL_ENV to toggle between server and client builds.\n// Note: The preset uses @babel/preset-env with 'useBuiltIns: usage' and assumes Object.assign is polyfilled.\n","lang":"javascript","description":"Basic setup of babel-preset-razzle in .babelrc with custom targets and options."},"warnings":[{"fix":"Set BABEL_ENV appropriately for your build scripts: BABEL_ENV=server for server bundle, BABEL_ENV=client for client bundle.","message":"The preset automatically swaps between server and client presets based on BABEL_ENV or NODE_ENV. Setting both NODE_ENV=production and BABEL_ENV=server will use server preset with @babel/preset-env targeting node, while BABEL_ENV=client (or unset) will target browsers. Failing to set BABEL_ENV correctly leads to wrong target environment and broken SSR.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add options to .babelrc: { presets: [['razzle', { corejs: 3 }]] } and install core-js@3.","message":"The `useBuiltIns` option defaults to 'usage' with core-js@2. As of Razzle 4, core-js@3 is recommended. Using the default polyfill behavior may cause missing polyfills or duplicate imports.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Update any custom Babel config that extends or overrides razzle preset to use the function form and inspect the returned config objects.","message":"In v4, the preset was refactored from a single preset to a function that returns different configurations. This may break custom overrides that relied on the Babel plugin list being static.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Install and configure @babel/preset-typescript or use the official razzle-plugin-typescript plugin.","message":"The preset does not include typescript or flow. If you need TypeScript, you must add @babel/preset-typescript separately or use razzle-plugin-typescript.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node.js to >=10.13.0 or configure @babel/preset-env targets explicitly.","message":"Support for Node.js versions below 10.13.0 was dropped in Razzle 4. The preset may emit code with syntax that does not work on older Node.js versions.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev babel-preset-razzle.","cause":"The package is not installed or not in node_modules.","error":"Error: Cannot find module 'babel-preset-razzle'"},{"fix":"Upgrade to babel-preset-razzle@4 or later, or remove the `corejs` option and use the default core-js@2 behavior.","cause":"You may be using an older version of babel-preset-razzle that does not support `corejs` option.","error":"Unknown option 'corejs' in preset 'razzle'"},{"fix":"Ensure you are using babel-preset-razzle@4 or later, or add @babel/plugin-proposal-class-properties manually.","cause":"The preset may not include the necessary plugin for class properties if you are using an older version.","error":"Support for the experimental syntax 'classProperties' isn't currently enabled"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}