snack-babel-standalone

5.0.0 verified Sat Apr 25 auth: no javascript

Standalone version of Babel bundled with presets and plugins for React Native, used in Expo Snack Runtime and Website. Version 5.0.0, released as part of the Snack monorepo. Optimized for runtime code parsing/transformation in browser environments, with two separate entrypoints (default for runtime, eslint for @babel/core replacement). Includes metro-react-native-babel-preset and @babel/preset-typescript. Unlike @babel/standalone, this is specifically tailored for React Native/Expo tooling and bundles only necessary dependencies to minimize bundle size.

Common errors

error Module '"snack-babel-standalone"' has no default export. ↓

cause Attempting to import default export, which does not exist.

fix

Use import * as babel from 'snack-babel-standalone' instead.

error Error: Cannot find module 'snack-babel-standalone' ↓

cause Package not installed or not in node_modules.

fix

Run 'yarn add snack-babel-standalone' or 'npm install snack-babel-standalone'.

Warnings

gotcha Using CommonJS require() will fail because package is ESM-only. ↓

fix Use ES module import syntax, e.g., import * as babel from 'snack-babel-standalone'.

gotcha Default import does not exist; importing babel as default will yield undefined. ↓

fix Use namespace import: import * as babel from 'snack-babel-standalone'.

breaking The eslint entrypoint moved from snack-babel-standalone/eslint to snack-babel-standalone/eslint in v5.0.0. ↓

fix Use snack-babel-standalone/eslint for ESLint parser replacement.

Install

npm install snack-babel-standalone

yarn add snack-babel-standalone

pnpm add snack-babel-standalone

Imports

babel

wrong

import babel from 'snack-babel-standalone'

correct

import * as babel from 'snack-babel-standalone'

Package exports a namespace object, not a default export.

transform

wrong

const { transform } = require('snack-babel-standalone')

correct

import { transform } from 'snack-babel-standalone'

ESM-only package, CommonJS require will not work.

BabelFileResult

import type { BabelFileResult } from 'snack-babel-standalone'

TypeScript type available for transform result.

Quickstart

Demonstrates importing the namespace and transforming TypeScript code with preset and plugin options.

import * as babel from 'snack-babel-standalone';

const code = `const x: number = 1;`;
const result = babel.transform(code, {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
  ],
  filename: 'test.js',
  sourceMaps: true,
  compact: false,
});
console.log(result.code);