Как отобразить приложение React в IE? Когда он работает нормально во всех других браузерах localhost и production? - PullRequest
0 голосов
/ 13 июня 2019

У меня был клиент, который пожаловался мне, что производственная сборка моего приложения React (ни один клиент не использует настраиваемую конфигурацию веб-пакета) хорошо отображается во всех браузерах, кроме IE.Он работает в Chrome, Firefox и Edge, но в IE он отображает пустую страницу.Я открыл свой браузер IE и посмотрел, нет ли в нем ошибок, нет ли ошибок в консоли.

Я думаю, что проблема связана с настройкой конфигурации моего веб-пакета.Вот оно:

  1. Я уже установил Isomorphic fetch и пакеты зависимостей обещания es6 и использовал их для всех моих запросов на выборку.(Я использую async await для своих обещаний)
  2. Я попытался добавить цели в свою пользовательскую конфигурацию веб-пакета, но безуспешно.
const path = require("path");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "/public"),
    historyApiFallback: true,
    port: 3000,
    proxy: {
      "/api": "http://localhost:5000"
    }
  },
  entry: ["babel-polyfill", __dirname + "/src/index.js"],
  output: {
    path: path.join(__dirname, "/public"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          query: {
            presets: [
              [
                "env",
                {
                  targets: {
                    browsers: ["last 2 versions", "ie >= 11"]
                  }
                }
              ],
              "react",
              "stage-0"
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: "file-loader"
        }
      }
    ]
  },
  plugins: [
    // Disable code splitting as it's creating many duplicate bundle profiles
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3312,
      files: [
        "./public/*.html",
        "./public/assets/scss/*.scss",
        "./public/assets/variables/*.scss",
        "./public/assets/mixins/*.scss",
        "./public/assets/reset/*.scss"
      ],
      proxy: "http://localhost:3000/"
    })
  ]
};

Это мой файл index.jsрендеринг приложения

import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import routes from "./routes";

ReactDOM.render(<div>{routes}</div>, document.getElementById("root"));

Я ожидаю, что смогу увидеть свое приложение React в локальной сборке и в производственной сборке для IE вместо того, чтобы ничего не видеть для IE.

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