Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work in IE11 #570

Open
tokijun216 opened this issue Jun 15, 2020 · 0 comments
Open

Does not work in IE11 #570

tokijun216 opened this issue Jun 15, 2020 · 0 comments
Labels
to-be-reproduced We need to reproduce this issue

Comments

@tokijun216
Copy link

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

@sammartinez sammartinez added the to-be-reproduced We need to reproduce this issue label Jun 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to-be-reproduced We need to reproduce this issue
Projects
None yet
Development

No branches or pull requests

2 participants