Polyfill в приложении create-реагировать не работает

я импортировал react-app-polyfill, однако в одном из моих componenetDidMounts я пытаюсь разобрать window.location.href и получаю ошибки.

Вот мой index.js

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

и вот код, который ломает мое приложение в IE 11

  async componentDidMount() {
    const curUrl = window.location.href;
    console.log(JSON.parse(curUrl));
}

Не уверен, почему это вызывает ошибку Object doesn't support property or method 'repeat' Любая помощь приветствуется, спасибо!

также вот мой package.json

{
  "name": "bulkyBOIZ",
  "version": "0.1.0",
  "proxy": "http://localhost:8000",
  "private": true,
  "dependencies": {
    "0s": "^1.0.0",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "amazon-cognito-auth-js": "^1.3.2",
    "aws-sdk": "^2.546.0",
    "axios": "^0.18.1",
    "body-parser": "^1.19.0",
    "date-fns": "^1.30.1",
    "env-cmd": "^10.0.1",
    "express": "^4.17.1",
    "formik": "^1.5.8",
    "glamor": "^2.20.40",
    "lodash": "^4.17.15",
    "react": "^16.8.0",
    "react-app-polyfill": "^1.0.2",
    "react-dom": "^16.8.0",
    "react-dropzone": "^6.0.4",
    "react-infinite-scroller": "^1.2.4",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.2.0",
    "react-scroll-sync": "^0.7.0",
    "react-select": "^2.4.1",
    "react-toastify": "^5.0.0-rc.6",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "winston": "^3.2.1",
    "winston-cloudwatch": "^2.0.9",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.development npm run build",
    "build:test": "env-cmd -f .env.test npm run build",
    "build:staging": "env-cmd -f .env.staging npm run build",
    "build:production": "env-cmd -f .env.production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server-dev": "nodemon server/index.js | pino-colada",
    "server": "node server/index.js",
    "dev": "run-p server start"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "axios-mock-adapter": "^1.16.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "enzyme-to-json": "^3.3.5",
    "express-pino-logger": "^4.0.0",
    "nodemon": "^1.19.3",
    "npm-run-all": "^4.1.5",
    "pino-colada": "^1.4.5",
    "react-test-renderer": "^16.8.1",
    "redux-mock-store": "^1.5.3"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }
}

mlisonek 13.12.2019 источник

Ответы (1)

arrow_upward
1
arrow_downward

const curUrl = window.location.href;
console.log(JSON.parse(curUrl));

Проблема связана с методом JSON.parse, он используется для анализа строки JSON, если мы используем его для анализа URL-адреса (например, "http://localhost:3000/"), он покажет "Объект не поддерживает свойство или метод "повторить"" в браузере IE и "JSON.parse Ошибка: недопустимый символ "ошибка в браузере Edge.

Итак, я предлагаю вам изменить код, как показано ниже:

 const curUrl = window.location.href;
 console.log(curUrl);

Объект не поддерживает свойство или метод «повторять»

Кроме того, поскольку String.prototype. Метод repeat() не поддерживает браузер IE, если вы хотите использовать его в браузере IE, добавьте следующий полифилл:

if (!String.prototype.repeat) { String.prototype.repeat = function(count) { 'use strict'; if (this == null) throw new TypeError('can\'t convert ' + this + ' to object'); var str = '' + this; // To convert string to integer. count = +count; // Check NaN if (count != count) count = 0; if (count < 0) throw new RangeError('repeat count must be non-negative'); if (count == Infinity) throw new RangeError('repeat count must be less than infinity'); count = Math.floor(count); if (str.length == 0 || count == 0) return ''; // Ensuring count is a 31-bit integer allows us to heavily optimize the // main part. But anyway, most current (August 2014) browsers can't handle // strings 1 << 28 chars or longer, so: if (str.length * count >= 1 << 28) throw new RangeError('repeat count must not overflow maximum string size'); var maxCount = str.length * count; count = Math.floor(Math.log(count) / Math.log(2)); while (count) { str += str; count--; } str += str.substring(0, maxCount - str.length); return str; } }

Zhi Lv 16.12.2019

comment

Спасибо за предложение, однако это более глубокая проблема. Это происходит в одном из пакетов, которые я использую для аутентификации, и я не могу это контролировать. Я попытаюсь добавить полифилл, чтобы посмотреть, поможет ли это, но у меня сложилось впечатление, что JSON.parse() не поддерживается ни для чего ниже IE 8. - mlisonek; 16.12.2019

comment

Полифилл не помог, так как при включении console.log String.prorotype.repeat он существует как функция, так же как и JSON.parse - mlisonek; 16.12.2019

comment

Кажется, что если мы создадим html-страницу для использования метода String.prorotype.repeat, она хорошо работает с полифиллом, но если мы добавим полифилл в приложение reactjs, у него все равно будет какая-то ошибка. Итак, я предлагаю вам напрямую регистрировать URL-адрес вместо использования метода JSON.parse для его анализа. - Zhi Lv; 17.12.2019

Polyfill в приложении create-реагировать не работает

Ответы (1)

Похожие вопросы