проблема webpack в реагировать на нативные: «Файлы плагинов / пресетов не могут экспортировать объекты, только функции» - PullRequest
0 голосов
/ 17 января 2020

Было много ответов на этот вопрос, которые устарели, я думаю, потому что ни одно из решений не помогло мне.

Сценарий:

Я использую react-native-web и react-native для веб-приложений и мобильных приложений. Для 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)

babel.config. js:

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

webpack.config. js:

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

Пакет. json:

"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"
  },

Спасибо за помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...