时间戳

首页 > 解决方案 > 无法获得未定义的属性“绑定”。Babel 7 + core-js + IE11

reactjs - 无法获得未定义的属性“绑定”。Babel 7 + core-js + IE11

问题描述

问题

我在 react/typescript 内置的实时聊天客户端上工作了一两个月，效果很好，但我们需要添加对 Internet Explorer 11 的支持。

最初在开发过程中，我使用 Webpack 作为构建系统，并且在使用 Typescript 时，我将所有内容都通过ts-loader.

由于需要支持，Internet Explorer 11我决定更改为babel 7，因为现在有很好的 typescript 支持。我希望使用 babel 来填充 IE11。

我相信我已经通过 babel docs 遵循了项目设置指南。然而，在虚拟机中测试 IE11 中的项目时，我仍然收到以下错误：

无法获取未定义或空引用的属性“绑定”。 在此处输入图像描述

如果我展开错误，它似乎在一个名为load-script.

在此处输入图像描述

它在包括 Edge 在内的所有其他现代浏览器中仍然可以完美运行，只是 IE11 似乎存在问题。

我不能确定，但​​似乎它没有对 node_modules 做任何事情。

关于设置的信息（我将在下面包含文件片段）：

我试图做的

当检查开发人员工具中的错误时，我将问题追溯到它抱怨的不同依赖项，注释掉导入并暂时卸载。然后它抱怨另一个模块。

这给我的印象是它无法处理导入的依赖项。因此，我尝试exclude: /node_modules/从webpack.config.js.

代码示例

包.json

  {
  "name": "@rradar/chat-client",
  "version": "2.2.9",
  "description": "",
  "main": "dist/main.js",
  "scripts": {
    "test": "jest --no-cache || true",
    "watch": "webpack --watch --mode development",
    "build": "webpack --mode production",
    "prettier:base": "prettier --parser typescript --single-quote",
    "prettier:check": "npm run prettier:base -- --list-different \"src/**/*.{ts,tsx}\"",
    "prettier:write": "npm run prettier:base -- --write \"src/**/*.{ts,tsx}\""
  },
  "bugs": {
    "url": "https://git.rradar.com/npm-packages/chat-client/issues",
    "email": "adam.bowers@rradar.com"
  },
  "repository": {
    "type": "git",
    "url": "https://git.rradar.com/npm-packages/chat-client"
  },
  "author": "rradar Limited",
  "license": "ISC",
  "contributors": [
    {
      "name": "Adam Bowers",
      "email": "adam.bowers@rradar.com"
    },
    {
      "name": "Tom Hughes",
      "email": "tom.hughes@rradar.com"
    }
  ],
  "jest": {
    "setupFiles": [
      "<rootDir>/config/test.setup.js"
    ],
    "moduleNameMapper": {
      ".scss$": "<rootDir>/config/SCSSStub.js"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/config/test.preprocess.js"
    },
    "testMatch": [
      "**/__tests__/*.(ts|tsx|js)"
    ]
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/react-fontawesome": "^0.1.0",
    "@rradar/grace-api": "^2.2.3",
    "classnames": "^2.2.6",
    "core-js": "^3.6.5",
    "css-loader": "^1.0.0",
    "date-fns": "^1.29.0",
    "es6-promise": "^4.2.4",
    "file-loader": "^1.1.11",
    "howler": "^2.0.14",
    "js-cookie": "^2.2.0",
    "lodash.clonedeep": "^4.5.0",
    "mo-js": "^0.288.2",
    "node-sass": "^4.14.1",
    "pulltorefreshjs": "^0.1.14",
    "pusher-js": "^4.2.2",
    "react-html-parser": "^2.0.2",
    "react-player": "^2.6.2",
    "react-redux": "^6.0.0",
    "redux": "^4.0.0",
    "resolve-url-loader": "^2.3.0",
    "uuid": "^8.2.0"
  },
  "peerDependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "lodash.clonedeep": "^4.5.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@babel/preset-typescript": "^7.12.1",
    "@types/classnames": "^2.2.7",
    "@types/cordova": "0.0.34",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "@types/howler": "^2.0.5",
    "@types/jest": "^23.3.0",
    "@types/js-cookie": "^2.1.0",
    "@types/lodash.clonedeep": "^4.5.3",
    "@types/node": "^10.5.2",
    "@types/pulltorefreshjs": "^0.1.2",
    "@types/pusher-js": "^4.2.0",
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.0.6",
    "@types/react-fontawesome": "^1.6.3",
    "@types/react-html-parser": "^2.0.1",
    "@types/react-redux": "^7.1.9",
    "@types/react-test-renderer": "^16.0.1",
    "@types/uuid": "^8.0.0",
    "@types/window-or-global": "^1.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.1.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "jest": "^23.4.1",
    "jsdoc": "^3.5.5",
    "lodash.clonedeep": "^4.5.0",
    "minami": "^1.2.3",
    "prettier": "^1.13.7",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-test-renderer": "^16.4.1",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "stylelint": "^9.3.0",
    "stylelint-order": "^0.8.1",
    "ts-jest": "^23.0.1",
    "ts-loader": "^4.5.0",
    "tslint": "^5.11.0",
    "tslint-react": "^3.6.0",
    "typescript": "^3.2.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-cli": "^3.3.11",
    "webpack-strip-block": "^0.2.0"
  }
}

babel.config.json

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": {"version": "3.6.5", "proposals": true},
        "debug": true
      }
    ],
    "@babel/preset-react",
    [
      "@babel/preset-typescript",
      {
        "isTSX": true,
        "allExtensions": true
      }
    ]
  ],

  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Webpack 配置

const path = require('path');

module.exports = (env, { mode }) => {
  const useBundleAnalyzerPlugin = mode !== 'production' || (env && env.local);

  if (useBundleAnalyzerPlugin) {
    BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
      .BundleAnalyzerPlugin;
  }

  return {
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
      library: 'ChatClient',
      libraryTarget: 'amd',
    },
    optimization: {
      usedExports: true,
    },
    devtool: 'source-map',
    externals: {
      lodash: 'lodash',
      react: 'react',
      reactDOM: 'react-dom',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'babel-loader'
        },
        {
          test: /\.(png|svg|jpg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                emitFile: true,
                name: 'images/[name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.(mp3)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 20000,
                fallback: 'file-loader',
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.scss$/,
          use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader?sourceMap' },
          ],
        },
        {
          test: /\.tsx|.ts$/,
          enforce: 'pre',
          exclude: /(node_modules|bower_components|\.spec\.js)/,
          use: [{ loader: 'webpack-strip-block' }],
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
        'chat-client': path.resolve(__dirname, '../module/dist/main.js'),
        assets: path.resolve(__dirname, 'src/assets'),
      },
      symlinks: true,
    },
    plugins: [
      ...(useBundleAnalyzerPlugin
        ? [
            new BundleAnalyzerPlugin({
              openAnalyzer: true,
            }),
          ]
        : []),
    ],
  };
};

标签： reactjstypescriptbabeljsinternet-explorer-11core-js

解决方案

我如何解决问题

在与同事交谈后，他们似乎过去也遇到过类似的问题。通过将以下内容导入根文件来解决此问题。

请记住，您必须先安装这些。

import 'promise-polyfill/src/polyfill';
import 'whatwg-fetch';

推荐阅读