Reactjs react native和#x27中的网页包问题；插件/预设文件不允许导出对象，只能导出函数；

对于这个问题，我想有很多答案已经过时了，因为没有一个解决方案对我有效

场景：

我正在使用

react native web

和

react native

用于web和移动应用程序。对于

react native web

，我需要捆绑

js

，以使

react native web

在我开始使用

react router native

时起作用

如果没有

react router native

，该网页包完美地捆绑了

js

，但添加时会抛出错误

ERROR in ../index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/name/Documents/rn/node_modules/babel-preset-es2016/lib/index.js
    at createDescriptor (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at passPerPreset (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:58:104)
    at cachedFunction (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/caching.js:62:27)
    at cachedFunction.next (<anonymous>)
    at evaluateSync (/Users/name/Documents/rn/node_modules/gensync/index.js:244:28)
    at sync (/Users/name/Documents/rn/node_modules/gensync/index.js:84:14)

webpack.config.js：

module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        'module:metro-react-native-babel-preset'
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties'
    ]
  };

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rootDir = path.join(__dirname, '..');
const webpackEnv = process.env.NODE_ENV || 'development';

module.exports = {
  mode: webpackEnv,
  entry: {
    app: path.join(rootDir, './index.js'),
  },
  output: {
    path: path.resolve(rootDir, 'dist'),
    filename: 'app-[hash].bundle.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js|mjs)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        "query": {
          "presets": ["@babel/preset-env", "@babel/preset-react", "es2016"],
        }
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    extensions: [
      '.web.tsx',
      '.web.ts',
      '.tsx',
      '.ts',
      '.web.jsx',
      '.web.js',
      '.jsx',
      '.js',
    ],
    alias: Object.assign({
      'react-native$': 'react-native-web',
    }),
  },
};

"dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "react": "16.9.0",
    "react-circular-progressbar": "^2.0.3",
    "react-dom": "^16.12.0",
    "react-native": "0.61.5",
    "react-native-progress-circle": "^2.1.0",
    "react-native-web": "^0.12.0-rc.1",
    "react-redux": "^7.1.3",
    "react-router-native": "^5.1.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/runtime": "^7.8.3",
    "@react-native-community/eslint-config": "^0.0.6",
    "@types/react": "^16.9.17",
    "@types/react-native": "^0.60.31",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-preset-es2016": "^6.24.1",
    "eslint": "^6.8.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.4",
    "react-native-typescript-transformer": "^1.2.13",
    "react-test-renderer": "16.9.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },

Package.json：

module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        'module:metro-react-native-babel-preset'
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties'
    ]
  };

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rootDir = path.join(__dirname, '..');
const webpackEnv = process.env.NODE_ENV || 'development';

module.exports = {
  mode: webpackEnv,
  entry: {
    app: path.join(rootDir, './index.js'),
  },
  output: {
    path: path.resolve(rootDir, 'dist'),
    filename: 'app-[hash].bundle.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js|mjs)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        "query": {
          "presets": ["@babel/preset-env", "@babel/preset-react", "es2016"],
        }
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    extensions: [
      '.web.tsx',
      '.web.ts',
      '.tsx',
      '.ts',
      '.web.jsx',
      '.web.js',
      '.jsx',
      '.js',
    ],
    alias: Object.assign({
      'react-native$': 'react-native-web',
    }),
  },
};

"dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "react": "16.9.0",
    "react-circular-progressbar": "^2.0.3",
    "react-dom": "^16.12.0",
    "react-native": "0.61.5",
    "react-native-progress-circle": "^2.1.0",
    "react-native-web": "^0.12.0-rc.1",
    "react-redux": "^7.1.3",
    "react-router-native": "^5.1.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/runtime": "^7.8.3",
    "@react-native-community/eslint-config": "^0.0.6",
    "@types/react": "^16.9.17",
    "@types/react-native": "^0.60.31",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-preset-es2016": "^6.24.1",
    "eslint": "^6.8.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.4",
    "react-native-typescript-transformer": "^1.2.13",
    "react-test-renderer": "16.9.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },

---

谢谢你的帮助。

你好，我能看一下你的输入文件吗？你是说

index.js

文件吗？是的，我是说你输入了网页文件中指定的index.js文件是的……我说的没错，我的意思是你能把它添加到问题中，这样我就能看到内容了吗？