Does not work in IE11 - Githubissues

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? I'm creating a SPA using Vue.js Both locally with yarn serve and with deploy with Amplify, When displaying the screen by using IE11, an error occurs and the screen does not start. The error point seems to be here https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/master/packages/aws-appsync/src/client.ts#L215

These are the console captures in case of an error console-error console-error-2

Since it is transpiled, the file name is client.js The error content is オブジェクトを指定してください means object expected

Error occurs in IE11 Does not occur on Chrome, FireFox, Edge.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "lint": "vue-cli-service lint",
    "test:unit": "jest --watch"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "aws-amplify": "^2.2.6",
    "aws-appsync": "^3.0.2",
    "core-js": "^3.4.4",
    "graphql": "^14.6.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-apollo": "^3.0.3",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.1.3",
    "vuetify": "^2.2.4",
    "vuex": "^3.1.2",
    "vuex-persist": "^2.2.0"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.10.1",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-typescript": "^7.8.3",
    "@nuxtjs/vuetify": "^1.10.2",
    "@types/aws-lambda": "^8.10.47",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.0",
    "@typescript-eslint/eslint-plugin": "^2.24.0",
    "@typescript-eslint/eslint-plugin-tslint": "^2.24.0",
    "@typescript-eslint/parser": "^2.24.0",
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-typescript": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "~4.2.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.32",
    "apollo-client": "^2.6.8",
    "apollo-link-http-common": "^0.2.15",
    "aws-amplify": "^2.2.6",
    "aws-appsync": "^3.0.2",
    "aws-lambda": "^1.0.5",
    "axios": "^0.19.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^25.1.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.5.3",
    "deepmerge": "^4.2.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-jest": "^23.8.2",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.1.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "fibers": "^4.0.2",
    "file-loader": "^6.0.0",
    "flush-promises": "^1.0.2",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "husky": "^4.2.1",
    "jest": "^25.1.0",
    "jest-transform-graphql": "^2.1.0",
    "lint-staged": "^10.0.4",
    "pre-commit": "^1.2.2",
    "prettier": "^1.19.1",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "ts-jest": "^25.2.1",
    "ts-loader": "^7.0.5",
    "typescript": "~3.5.3",
    "url-regex": "^5.0.0",
    "vue-apollo": "^3.0.3",
    "vue-cli-plugin-vuetify": "^2.0.3",
    "vue-i18n": "^8.15.3",
    "vue-jest": "^3.0.5",
    "vue-loader": "^15.9.2",
    "vue-strict": "^0.0.21",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0",
    "vuex-class-component": "^2.2.1",
    "vuex-module-decorators": "^0.16.1",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
var fs = require('fs');

const nodeModules = {};
fs.readdirSync('node_modules')
  .filter(x => {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(mod => {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      vue: 'vue/dist/vue.js',
    },
    extensions: ['.ts', '.vue', '.webpack.js', '.web.js', '.mjs', '.json'],
    modules: ['node_modules'],
  },
  entry: { main: './src/main.ts' },
  output: {
    filename: 'main.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        loader: 'style-loader!css-loader!sass-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: {
                      ie: 11,
                      esmodules: true,
                    },
                    useBuiltIns: 'entry',
                    corejs: 3,
                  },
                ],
              ],
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          transpileOnly: true,
          experimentalWatchApi: true,
        },
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              loaders: {
                ts: [{ loader: 'ts-loader' }],
              },
            },
          },
          { loader: 'vue-strict' },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: 'images/',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CopyWebpackPlugin(['index.html']),
    new webpack.HotModuleReplacementPlugin(),
  ],
  externals: nodeModules,
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "vuetify", "jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

vue.config.js

const path = require('path');
module.exports = {
  transpileDependencies: [
    'vuetify',
    'vuex-persist',
    'url-regex',
    '@aws-crypto',
    '@aws-amplify',
  ],
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src/'),
      },
    },
  },
};

What is the expected behavior? Error does not occur in IE11, and it works the same as Chrome etc.

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions? version: Internet Explore 11.900.18362.0 Unknown if it works in other versions

awslabs / aws-mobile-appsync-sdk-js

Does not work in IE11 #570