mermaid fails to load in IE11

Created on 4 Jan 2020 · 6Comments · Source: mermaid-js/mermaid

Describe the bug
Users expect IE11 support. This was raised in #1030 and addressed in #1103. However, this fix did not worked. This impacts users of products that depend on mermaid too (e.g. GitLab).

When loading mermaid with IE11 it failes because of a sytax error în crypto-random-string.

const generateForCustomCharacters = (length, characters) => {
                                    ^^^^^^^^^^^^^^^^

Lamdba functions have been introduced in ES6 and therefore IE11 does not support them. When looking at the compiled build it seems like the node modules are not transpiled accordingly. All node modules need to be included in babel aswell in order to make mermaid usable in IE11.

To Reproduce

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="mermaid">
      graph LR; A --- B; B-->C[fa:fa-ban forbidden]; B-->D(fa:fa-spinner);
    </div>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
    <script>
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

Related to #1082

Development Help wanted! Retained Approved Bug / Error

Source

klemmchr

Most helpful comment

To fully support IE11, we should include Mermaid dependencies also

I've changed the file webpack.config.base.js and added libraries used in package.json that is not clearly compatible with IE11

const jsRule = {
  test: /\.js$/,
  include: [
    path.resolve(__dirname, './src'),
    path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
    path.resolve(__dirname, './node_modules/crypto-random-string'),
    path.resolve(__dirname, './node_modules/@braintree/sanitize-url'),
    path.resolve(__dirname, './node_modules/dagre'),
    path.resolve(__dirname, './node_modules/graphlib'),
    path.resolve(__dirname, './node_modules/he'),
    path.resolve(__dirname, './node_modules/scope-css')
  ],
  use: {
    loader: 'babel-loader'
  }
};

With this change, the mermaid.min.js loads without errors, flowcharts and sequence diagrams work, BUT, other types of diagrams (e.g., Gantt, Class, ...) doesn't work and cause JS errors in the console.

Adding polyfill to babel compilations breaks the code

ashrafteleb on 20 Feb 2020

❤1 👍1

All 6 comments

Re: crypto-random-string, see also: https://github.com/mermaid-js/mermaid/issues/1082#issuecomment-555882376

tjrobinson on 8 Jan 2020

This isn't my area of expertise, but would this help? https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions

tjrobinson on 8 Jan 2020

Re: crypto-random-string, see also: #1082 (comment)

Right, this could be interconnected. However, I fear that this issue goes beyond that.
However, I will put the other issue on hold until this issue is resolved.

klemmchr on 8 Jan 2020

To fully support IE11, we should include Mermaid dependencies also

I've changed the file webpack.config.base.js and added libraries used in package.json that is not clearly compatible with IE11

const jsRule = {
  test: /\.js$/,
  include: [
    path.resolve(__dirname, './src'),
    path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
    path.resolve(__dirname, './node_modules/crypto-random-string'),
    path.resolve(__dirname, './node_modules/@braintree/sanitize-url'),
    path.resolve(__dirname, './node_modules/dagre'),
    path.resolve(__dirname, './node_modules/graphlib'),
    path.resolve(__dirname, './node_modules/he'),
    path.resolve(__dirname, './node_modules/scope-css')
  ],
  use: {
    loader: 'babel-loader'
  }
};

Adding polyfill to babel compilations breaks the code

ashrafteleb on 20 Feb 2020

❤1 👍1

Thats excellent! Could you maybe make a PR for this?

knsv on 26 Feb 2020

Edit: May have spoken too soon, it's not working again. I did manage to view a diagram in IE11 (albeit without any text labels) earlier but now it's back to the error described above

It's been a few months so I tried this out again in my project and with mermaid 8.5.1 (and crypto-random-string 3.2.0), it's currently working in IE11. I'm not sure what's changed to make this happen - there are so many other dependencies that could be different since I last tried.

Though it breaks again if I use mermaid 8.6.4 - possibly due because it depends on newer versions of uglify-js, d3-selection and slugify.

I don't really know how to fix this properly as I don't understand how babel-loader is used by mermaid, but at least I have something working for now.

tjrobinson on 28 Jul 2020

Was this page helpful?

0 / 5 - 0 ratings