babel-preset-taro

4.2.0 verified Sat Apr 25 auth: no javascript

Babel preset for Taro projects, enabling JSX compilation for React, Vue, Solid, and Prefresh frameworks. Current stable version is 4.2.0, released on 2025-04-01. Release cadence: irregular, with frequent patch releases. Key differentiator: supports cross-platform app development (WeChat, Alipay, Baidu, HarmonyOS, H5, RN) by automatically configuring Babel plugins based on the target framework. Requires Node >= 18. Part of the NervJS/Taro monorepo. Alternatives: manual Babel config with individual presets.

Common errors

error Error: Cannot find module '@babel/core' ↓

cause @babel/core is a peer dependency not installed.

fix

Run npm install @babel/core --save-dev

error Error: Framework 'vue' is not supported by babel-preset-taro ↓

cause Misspelled framework name or missing peer dependency.

fix

Use framework: 'vue', or if using Vue, install @vue/babel-plugin-jsx

error Error: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using ES module import syntax in babel.config.js which expects CommonJS.

fix

Change babel.config.js to use module.exports = { presets: [...] } instead of export default.

Warnings

breaking Requires Node >= 18, dropping support for Node 14 and 16. ↓

fix Upgrade Node.js to version 18 or higher.

deprecated The 'vite' framework option is deprecated in favor of 'react' or 'vue' with separate Vite plugins. ↓

fix Use framework: 'react' or 'vue' and configure Vite via @tarojs/plugin-vite-devtools.

gotcha If using with Vue, ensure @vue/babel-plugin-jsx version matches your Vue version (3.x). ↓

fix Install @vue/babel-plugin-jsx@^1.2.2 for Vue 3.

gotcha The preset automatically adds plugins for React, Vue, or Solid based on the 'framework' option. Do not manually add conflicting presets like @babel/preset-react. ↓

fix Remove any manual JSX presets and rely on babel-preset-taro's framework selection.

gotcha For React Native (RN) projects, you must install @tarojs/taro-rn as a peer dependency even if not used in the final app. ↓

fix Install @tarojs/taro-rn@4.2.0 as a devDependency.

Install

npm install babel-preset-taro

yarn add babel-preset-taro

pnpm add babel-preset-taro

Imports

default

wrong

import taroPreset from 'babel-preset-taro'

correct

module.exports = { presets: [['babel-preset-taro', { framework: 'react' }]] }

This package is not ESM-friendly; use CommonJS require for babel.config.js.

withTaro

wrong

import { withTaro } from 'babel-preset-taro'

correct

const { withTaro } = require('babel-preset-taro')

withTaro is a helper to extend the preset; requires CommonJS.

getPreset
```
const { getPreset } = require('babel-preset-taro')
```
getPreset returns a presets array; only available via CommonJS require.

Quickstart

Configures Babel for a Taro React project with TypeScript support and automatic JSX runtime.

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-taro', {
        framework: 'react',
        ts: true,
        react: {
          runtime: 'automatic',
        },
      }],
    ],
    plugins: [
      ['@babel/plugin-transform-runtime', { corejs: 3 }],
    ],
  };
};