IE: Object doesn't support this action in app-errors.js #612

kbrah · 2020-07-31T10:20:51Z

I'm struggling to get single-spa working in IE. Currently I am with error Object doesn't support this action on app-errors.js and it points to following code. Any ideas? I have ie 11 target in my babel configs and es5 target on tsconfigs.

my index,ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fimlab Portal</title>
  <!-- <link rel="stylesheet" type="text/css" href="index.css"></link> -->
  <meta name="importmap-type" content="systemjs-importmap" />
<script>
    if (typeof Promise === 'undefined')
      document.write('<script src="node_modules/bluebird/js/browser/bluebird.core.js"><\/script>');
  </script>
  <script>
  if (typeof fetch === 'undefined')
    document.write('<script src="node_modules/fetch-polyfill/fetch.js"><\/script>');
  </script>
  <script src="http://localhost:3000/isInteger.js"></script> 
  <script type="systemjs-importmap" src="/importmap.json"></script>
  <script type="text/javascript" src="/jquery-3.1.1.min.js"></script>
  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@org/root-config": "http://localhost:3000/org-root-config.js",
        "@org/portal": "http://localhost:3001/org-portal.js",
      }
    }
  </script>
  <% } %>
  <script src="http://localhost:3000/import-map-overrides.js"></script>
  <script src="http://localhost:3000/system.min.js"></script>
  <script src="http://localhost:3000/amd.min.js"></script>
  <script src="http://localhost:3000/named-exports.min.js"></script>

</head>
<body>
  <script>
    System.import('@org/root-config');
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>

root project webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "src/root-config"),
    target: "node",
    mode: "development",
    devtool: "source-map",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "org-root-config.js",
        libraryTarget: "system",
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        modules: [path.resolve(__dirname, "node_modules")],
    },
    module: {
        rules: [
            { parser: { system: false } },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader",
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    devServer: {
        port: 3000,
        historyApiFallback: true,
        headers: {
            "Access-Control-Allow-Origin": "*",
        },
        disableHostCheck: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            template: "src/index.ejs",
            templateParameters: {
                isLocal: true, //env && env.isLocal === "true",
            },
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [{ from: "src/static" }],
        }),
    ],
    externals: [/^@fimlab-ui\/.+$/], // /^@fimlab-ui\/.+$/
};

root babel.config.json

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1",
                    "ie": "11"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.4"
            }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

The text was updated successfully, but these errors were encountered:

joeldenning · 2020-07-31T17:05:34Z

Hi @kbrah, single-spa supports IE11 but not IE10. Are you trying IE11?

Regarding the screenshot you shared with the stacktrace, my guess is that the error is not originating from app-errors.js. Single-spa will catch any errors thrown during load, bootstrap, mount, or unmount and then surface them to any single-spa error handlers. My guess is that one of your applications throws an error when it is loaded or mounted, and that that is the cause.

Internet Explorer's error messages often end up being strings instead of Error objects that have stack traces, which makes things particularly difficult. The next steps I'd take to debug would be to go up the call stack in the browser devtools to see if you can identify where the error is coming from. I see you have a breakpoint in the devtools - you can reuse that one to go up the call stack to try to identify which application is throwing the error and why.

Another thing I'd do to debug is to run the following in the browser console, and look for which application is in SKIP_BECAUSE_BROKEN status.

System.import('single-spa').then(function (singleSpa) {
  singleSpa.getAppNames().forEach(function (appName) {
    console.log(appName, singleSpa.getAppStatus(appName));
  })
})

My guess is that you'll see one of the applications in SKIP_BECAUSE_BROKEN status, which would be a clue that it might have code that doesn't work in IE11.

kbrah · 2020-08-03T09:22:27Z

Thanks for the help! I managed to trace the error back to calling setPublicPath function in my application. if I remove that, the error does not happen. Content of the app does not seem to have an effect. Any ideas from that?

joeldenning · 2020-08-03T17:25:43Z

systemjs-webpack-interop had an IE11 bug that was fixed in joeldenning/systemjs-webpack-interop@59838bb and released in https://github.com/joeldenning/systemjs-webpack-interop/releases/tag/v2.1.1. Are you using 2.1.1?

kbrah · 2020-08-04T05:58:00Z

Yes I am

joeldenning · 2020-08-04T21:25:30Z

If you could provide more details about the error, I'd be happy to help get any IE11 issues fixed.

kbrah · 2020-08-10T10:40:48Z

here is the stack trace

"TypeError: Object doesn't support this action\n   at resolveDirectory (http://localhost:3001/org-ui-portal.js:41479:3)\n   at setPublicPath (http://localhost:3001/org-ui-portal.js:41475:3)\n   at ./src/set-public-path.js (http://localhost:3001/org-ui-portal.js:46402:1)\n   at __webpack_require__ (http://localhost:3001/org-ui-portal.js:36:12)\n   at ./src/org-ui-portal.tsx (http://localhost:3001/org-ui-portal.js:44594:22)\n   at __webpack_require__ (http://localhost:3001/org-ui-portal.js:36:12)\n   at Anonymous function (http://localhost:3001/org-ui-portal.js:46427:1)\n   at __webpack_require__ (http://localhost:3001/org-ui-portal.js:36:12)\n   at Anonymous function (http://localhost:3001/org-ui-portal.js:100:11)\n   at execute (http://localhost:3001/org-ui-portal.js:16:4)\nFrom previous event:\n   at Anonymous function (http://localhost:3000/system.min.js:4:3777)\n   at Anonymous function (http://localhost:3000/system.min.js:4:3751)\nFrom previous event:\n   at w.import (http://localhost:3000/system.min.js:4:2510)\n   at o.import (http://localhost:3000/system.min.js:4:6647)\n   at Global code (http://localhost:3000/:61:5)"

Here is the org-ui-portal.js file.

org-ui-portal.zip

Let me know if you need something else.

joeldenning · 2020-08-10T18:12:51Z

Thanks for providing the extra info. I have found the issue. It is that IE11 doesn't support new URL(), which is used inside of systemjs-webpack-interop. See https://github.com/joeldenning/systemjs-webpack-interop/blob/4a8007f2def6f729307407da1bedf6904736b43a/public-path.js#L45. I'll put together a fix and release a new version.

joeldenning · 2020-08-10T18:16:18Z

One workaround for this that doesn't require a fix to systemjs-webpack-interop is to include the following in your root config's index.ejs file at the top:

<script src="https://cdn.jsdelivr.net/npm/url-polyfill@1.1.10/url-polyfill.min.js"></script>

joeldenning · 2020-08-10T18:35:20Z

Fixed in joeldenning/systemjs-webpack-interop#11 and released in https://github.com/joeldenning/systemjs-webpack-interop/releases/tag/v2.1.2

Let me know if 2.1.2 works for you!

joeldenning added a commit to joeldenning/systemjs-webpack-interop that referenced this issue Aug 10, 2020

Fix IE11 bug. Resolves single-spa/single-spa#612

a3e31c2

joeldenning mentioned this issue Aug 10, 2020

Fix IE11 bug. Resolves single-spa/single-spa#612 joeldenning/systemjs-webpack-interop#11

Merged

joeldenning closed this as completed in joeldenning/systemjs-webpack-interop@11d2227 Aug 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IE: Object doesn't support this action in app-errors.js #612

IE: Object doesn't support this action in app-errors.js #612

kbrah commented Jul 31, 2020

joeldenning commented Jul 31, 2020

kbrah commented Aug 3, 2020

joeldenning commented Aug 3, 2020

kbrah commented Aug 4, 2020

joeldenning commented Aug 4, 2020

kbrah commented Aug 10, 2020

joeldenning commented Aug 10, 2020

joeldenning commented Aug 10, 2020

joeldenning commented Aug 10, 2020

IE: Object doesn't support this action in app-errors.js #612

IE: Object doesn't support this action in app-errors.js #612

Comments

kbrah commented Jul 31, 2020

joeldenning commented Jul 31, 2020

kbrah commented Aug 3, 2020

joeldenning commented Aug 3, 2020

kbrah commented Aug 4, 2020

joeldenning commented Aug 4, 2020

kbrah commented Aug 10, 2020

joeldenning commented Aug 10, 2020

joeldenning commented Aug 10, 2020

joeldenning commented Aug 10, 2020