babel-plugin-redux-saga

1.2.0 verified Sat Apr 25 auth: no javascript maintenance

Babel plugin (v1.2.0, latest) that enhances redux-saga error messages by adding file location metadata to generator functions and effects. During transpilation, it attaches '@@redux-saga/LOCATION' properties to sagas and call/yield expressions, enabling developer tools to display source file, line number, and code snippet in error traces. Key differentiator: zero runtime overhead since it's a compile-time transform. Still in beta (not recommended for production). Works with Babel 6/7 and redux-saga ^1.0.0-rc.0. Does not support React Native. Inactive development since 2020.

Common errors

error Module not found: Can't resolve 'babel-plugin-redux-saga' ↓

cause The package is not installed as a devDependency, or Babel is not configured to look in node_modules.

fix

Run: npm install --save-dev babel-plugin-redux-saga

error Error: Cannot find module 'babel-plugin-redux-saga' ↓

cause The plugin is missing in your Babel configuration path.

fix

Ensure the plugin name is exactly 'babel-plugin-redux-saga' in the plugins array.

error The plugin does not work with React Native ↓

cause React Native's Babel transform pipeline does not support the plugin's AST modifications.

fix

Do not use this plugin in React Native projects. Remove it from your Babel config when building for React Native.

Warnings

deprecated Package is no longer actively maintained; last release was in 2020. Consider alternatives like @redux-saga/debug or redux-saga's built-in error handling. ↓

fix Migrate to redux-saga's native error handling or use source maps instead.

gotcha Plugin is still in beta; use on your own risk. Not recommended for production environments. ↓

fix Avoid using in production builds. Consider testing thoroughly before deploying.

breaking Plugin does not work with React Native due to unsupported Babel transforms in that environment. ↓

fix Do not use this plugin in React Native projects. Use alternative debugging tools.

gotcha The plugin modifies source code by adding 'Object.defineProperty' calls, which may affect code readability in transpiled output. Use source maps for debugging. ↓

fix Enable source maps in your build tool (e.g., webpack devtool) to maintain debuggable output.

Install

npm install babel-plugin-redux-saga

yarn add babel-plugin-redux-saga

pnpm add babel-plugin-redux-saga

Imports

babel-plugin-redux-saga

wrong

// CommonJS require in plugin list (not supported)
const plugin = require('babel-plugin-redux-saga');
plugins: [plugin]

correct

// in .babelrc or babel.config.js
plugins: ['babel-plugin-redux-saga']

Babel plugin must be specified as a string in the plugins array. Node-style require is not valid for Babel config.

useAbsolutePath option
wrong
```
{
  "plugins": ["babel-plugin-redux-saga", { "useAbsolutePath": true }]
}
```
correct
```
// .babelrc
{
  "plugins": [
    ["babel-plugin-redux-saga", { "useAbsolutePath": true }]
  ]
}
```
When passing options, wrap the plugin name and options in an array. The wrong syntax places the plugin name and options as separate entries in the plugins array.

Quickstart

Shows installation, Babel plugin configuration, and the resulting enhanced error trace with file locations.

// 1. Install
// npm i --save-dev babel-plugin-redux-saga

// 2. Babel config (e.g., .babelrc)
{
  "plugins": ["babel-plugin-redux-saga"]
}

// 3. Example saga (source)
function* mySaga() {
  const data = yield call(api.fetch, '/users');
}

// 4. After transformation, error messages include file/line:
// "The above error occurred in task mySaga  src/sagas.js?12"
// "call(api.fetch, '/users')  src/sagas.js?13"