When using redux-saga with react-native-web we get an error `Cannot read property 'mark' of undefined`

Question

I just started playing with redux-sagas, and I am getting a strange error. We use React Native for iOS, Android and Web development, the error I am getting is specific to the web environment.

In our code, I have ./sagas/index.js with this in it:

function* mySaga() {
  console.log('my saga');
}

export default mySaga;

As soon as I import that file anywhere (let alone try to call the function), I get this error:

Uncaught TypeError: Cannot read property 'mark' of undefined
    at Object../src/sagas/index.js (bundle.js:80385)
    at __webpack_require__ (bootstrap 029e2c2…:659)
    at fn (bootstrap 029e2c2…:85)

I am thinking it has to be something in our webpack so I am including that here:

const webpack = require('webpack');

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'build'),
    // enable HMR
    hot: true,
    // embed the webpack-dev-server runtime into the bundle
    inline: true,
    // serve index.html in place of 404 responses to allow HTML5 history
    historyApiFallback: true,
    host: '0.0.0.0',
    port: 3333
  },
  devtool: 'source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:3333',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    path.join(__dirname, '../index.web.js')
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "../node_modules/react-native-vector-icons"),
          path.resolve(__dirname, "../node_modules/react-native-elements"),
          path.resolve(__dirname, "../node_modules/react-native-tab-view"),
          path.resolve(__dirname, "../node_modules/react-native-side-menu"),
          path.resolve(__dirname, "../node_modules/react-native-tab-navigator"),
          path.resolve(__dirname, '../index.web.js'),
          path.resolve(__dirname, '../src')

        ],
        loader: 'babel-loader?+cacheDirectory',
        query: {
            presets: ['es2015', 'stage-2', 'react', 'react-native', 'flow'],
            plugins: [
              'transform-flow-comments',
              'transform-react-remove-prop-types'
            ]
        }
      },
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        include: [
          path.resolve(__dirname, "../node_modules/react-native-vector-icons"),
          path.resolve(__dirname, "../node_modules/react-native-elements"),
          path.resolve(__dirname, "../node_modules/react-navigation"),
          path.resolve(__dirname, "../src/assets/")
        ],
        loader: 'file-loader',
        query: { name: '[name].[hash:16].[ext]' }
      },
      {
        test: /\.ttf$/,
        loader: "url-loader", // or directly file-loader
        include: path.resolve(__dirname, "../node_modules/react-native-vector-icons"),
      },
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      },
      '__DEV__': JSON.stringify(process.env.NODE_ENV === 'development')
    })
  ],
  resolve: {
    modules: [
      path.join(__dirname, '..', 'node_modules')
    ],
    alias: {
      'react-native': 'react-native-web',
      'react-navigation': 'react-navigation/lib/react-navigation.js',
    }
  }
};

Any ideas??

Answer 1

This seems to be an issue due to babel-preset-react-native 2.1.0. Simply downgrade to 2.0.0 and it should work fine:

watchman watch-del-all
rm -rf ./node_modules
rm -rf $TMPDIR/react-*
npm i [email protected] -D -S
npm install
npm start -- --reset-cache
react-native run-ios

See issue #14838 for more details.

Answer 2

Try this syntax:

const mySaga = function* mySaga() {
  console.log('my saga');
}

It worked for me.