react-native - 当使用 redux-saga 和 react-native-web 时，我们收到错误 `Cannot read property ' 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更多细节。