将 react native web 添加到 react native 项目时出错

Question

我刚刚创建了 react native 项目，我想将 react native web 添加到它。我关注了为它提供的document，但我收到了这个错误：

ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /home/hamidreza/Desktop/test/index.web.js: Cannot read property 'filename' of undefined
    at PluginPass.JSXOpeningElement (/home/hamidreza/Desktop/test/node_modules/babel-plugin-transform-react-jsx-source/lib/index.js:32:39)
    at newFn (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:97:18)
 @ multi ./index.web.js main[0]

这是我的index.web.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.js:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

web/webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '../');
const babelLoaderConfiguration = {
  test: /\.js$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['react-native'],
      plugins: ['react-native-web']
    }
  }
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

module.exports = {
  entry: [
    // path.resolve(appDirectory, 'polyfills-web.js'),
    path.resolve(appDirectory, 'index.web.js')
  ],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: [ '.web.js', '.js' ]
  }
}

package.json:

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-dom": "^16.13.1",
    "react-native-web": "^0.12.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^26.0.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-react-native-web": "^0.12.3",
    "babel-preset-react-native": "^4.0.1",
    "eslint": "^7.2.0",
    "jest": "^26.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

我不知道我的问题出在哪里。一切都像文档一样。

Answer 1

尝试删除"env": { "development": { "plugins": [ "transform-react-jsx-source" ] } } 来自项目根文件夹中的 .babelrc 文件。看到这个话题：https://github.com/expo/expo/issues/2576#issuecomment-435569256