标签: polyfills

使用Rappid我在 IE11 控制台中遇到错误：

Object doesn't support property or method 'contains'

此错误来自没有该方法的 SVGElement。Chrome 中的相同代码有效。

好像我需要填充工具为这种缺少方法，但根据MDN文档上包含它是从IE9支持和起来，但不支持SVGElement。

编辑：这是一个片段 - 尝试在 Chrome 和 IE11 中运行

Object doesn't support property or method 'contains'

const joint = window.joint;

let graph = new joint.dia.Graph;

let paper = new joint.dia.Paper({
    width: 1500,   /*200,*/
    height: 1500,  /*200,*/
    el: $('.paper-container'),
    gridSize: 1,
    drawGrid: true,
    model: graph,
    //defaultLink: new joint.shapes.app.Link,
    //defaultConnectionPoint: joint.shapes.app.Link.connectionPoint,
    interactive: { linkMove: false }
});

$('.paper-container').append(paper.el);
paper.render();
    
var member = function(x, y, …

我正在尝试构建我的 gatsby 项目，但由于 IntersectionObserver 未被识别，我无法构建。我在 InView 组件中使用了intersectionObserver：

import React, { useRef, useState, useEffect } from 'react'


const InView = ({ children }) => {
    const [boundingClientY, setBoundingClientY] = useState(null)
    const [direction, setDirection] = useState(null)
    const [element, setElement] = useState(null)
    const [inView, setInView] = useState(false)



    const observer = useRef(new IntersectionObserver((entries) => {
        const first = entries[0]
        const { boundingClientRect } = first
        first.isIntersecting && setInView(true)
        !first.isIntersecting && setInView(false)
        boundingClientRect.y > boundingClientY && setDirection('down')
        boundingClientRect.y < boundingClientY && setDirection('up')
        boundingClientY && setBoundingClientY(first.boundingClientRect.y) …

我在这里看到了很多类似的问题，我已经尝试了所有方法，但我不知道为什么仍然没有显示任何内容。

1. npm install react-app-polyfill

2. 我在 package.json 的生产和开发数组中添加了“ie 11”

3. 将此两行添加import "react-app-polyfill/ie11"; import "react-app-polyfill/stable";到顶部index.js

4. 删除 node_modules 中的 .cache 文件夹

5. 重启应用

但仍然没有在 ie 11 中显示任何内容。

这是我的 package.json

{
  "name": "firealarm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.3",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^3.26.2",
    "axios": "^0.19.0",
    "core-js": "^3.6.1",
    "cors": "^2.8.5",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.2.11",
    "react": "^16.12.0",
    "react-app-polyfill": "^1.0.5",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "set PORT=3006 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": …

我试图找出Google Maps v3和我们用于非 ES6浏览器（例如 IE11）的 polyfill 的问题。我们得到的错误是：

This site overrides Array.from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly.

polyfill 是：（来自https://vanillajstoolkit.com/polyfills/arrayfrom/）

if (!Array.from) {
  Array.from = (function () {
    var toStr = Object.prototype.toString;
    var isCallable = function (fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };
    var toInteger = function (value) {
      var number = Number(value);
      if (isNaN(number)) { …

我的 React 应用程序不能在 IE 11 上运行。
我的客户希望该应用程序至少可以在 ie11 上运行。
所以，我必须解决这个错误。

我尝试了“react-app-polyfill”中的官方文档。但它仍然不起作用。
请帮我。

源代码/索引.jsx

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';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

包.json

  "dependencies": {
    ...
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.24",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.3",
    "axios": "^0.19.0",
    "install": "^0.13.0",
    "node-sass": "^4.13.0",
    "npm": "^6.13.4", …

我正在使用 Composer，并且刚刚更新了guzzlehttp/guzzle. 我对安装的软件包感到惊讶：

>composer update  guzzlehttp/guzzle
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 3 installs, 1 update, 0 removals
  - Installing symfony/polyfill-php72 (v1.17.0): Downloading (100%)
  - Installing symfony/polyfill-mbstring (v1.17.0): Downloading (100%)
  - Installing symfony/polyfill-intl-idn (v1.17.0): Downloading (100%)
  - Updating guzzlehttp/guzzle (6.5.2 => 6.5.4): Downloading (100%)

我正在使用mbstring已安装的 php 7.4，并且没有理由安装这些填充。Composer 知道我正在使用的 PHP 版本：

>composer show --platform
(...)
ext-mbstring        7.4.2    The mbstring PHP extension
(...)
php                 7.4.3    The PHP interpreter

我怀疑我在某个地方配置错误，安装这些填充对我来说没有意义。

我正在尝试将此包https://github.com/shwilliam/vue-scrollin安装到我的 laravel + vue 项目中。用laravel mix编译后，出现以下错误：

找不到模块：错误：无法解析“\node_modules\vue-scrollin\dist”中的“计时器”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - 安装 'timers-browserify' 如果你不这样做想要包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "timers": false }

我按照给定的说明进行操作，但它给了我同样的错误。

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
        .sass('resources/css/app.scss', 'public/css/app.css')
        .postCss('resources/css/app.css', 'public/css', [
            //
        ])
        .webpackConfig(require('./webpack.config'));

webpack.config.js

module.exports = {
    resolve: {
        fallback: { "timers": require.resolve("timers") }
    },
};

包.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000", …

当我在应用程序中打开 Hermes 时，我遇到了问题。特别是在 Intl 支持下，我在 Android 中收到此错误ReferenceError: Property 'Intl' doesn't exist, js engine: hermes。

我已经读过这些帖子了

• Reddit 评论
• Github评论
• 另一条 Github 评论

但我无法让它发挥作用。有没有人成功应用这些解决方案或让它与其他方法一起使用？

反应本机 0.63.3

我看到用户收到错误，ReferenceError: Can't find variable: ResizeObserver即使他们使用的浏览器（Safari v15.6.1、v16.1）是应该支持 ResizeObserver 的版本。

任何人都知道可能是什么原因造成的？

PS - 我还使用polyfill.io为不支持它的浏览器加载ResizeObserver polyfill，但我猜在这些情况下它不会下载polyfill，因为这些浏览器版本应该支持ResizeObserver

谢谢

我正在研究一些例子并学习角度。使用 Angular cli 创建新项目时，不会生成 polyfills.ts。还有其他人遇到过这个问题吗？这是生成的文件结构。

生成的文件结构

我已尝试手动将 polyfills.ts 文件添加到 src 文件夹，但这似乎仍然不起作用。