当将 redux-saga 与 react-native-web 一起使用时，我们会收到一个错误 `Cannot read 属性 'mark' of undefined`

Question

我刚开始玩 redux-sagas，我遇到了一个奇怪的错误。我们使用 React Native 进行 iOS、Android 和 Web 开发，我得到的错误是特定于 Web 环境的。

在我们的代码中，我有 ./sagas/index.js 里面有这个：

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

export default mySaga;

只要我将该文件导入任何地方（更不用说尝试调用该函数），我就会收到此错误：

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)

我想它一定是我们的 webpack 中的东西，所以我把它包括在这里：

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',
    }
  }
};

有什么想法吗？？

Answer 1

由于 babel-preset-react-native 2.1.0，这似乎是一个问题。只需降级到 2.0.0，它应该可以正常工作：

watchman watch-del-all
rm -rf ./node_modules
rm -rf $TMPDIR/react-*
npm i babel-preset-react-native@2.0.0 -D -S
npm install
npm start -- --reset-cache
react-native run-ios

有关详细信息，请参阅 issue #14838。

Answer 2

试试这个语法：

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

对我有用。

当将 redux-saga 与 react-native-web 一起使用时，我们会收到一个错误 `Cannot read 属性 'mark' of undefined`

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

react-native

redux-saga

react-native-web