Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mermaid fails to load in IE11

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

m-mohamedincommented, Feb 20, 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'
  }
};

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

0reactions

jgreywolfcommented, Feb 2, 2021

As IE11 is heading towards EOL later this year I am closing this issue as “wont fix”.