Dynamic Component with External Script - 'Failed to load module script:'

[akil-rails]

Discussed in #1041

^{Originally posted by akil-rails July 22, 2022}
The guide explains:

To use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks: how to use components th

<script>
export default {
  mounted() {
    import('./lib-that-access-window-on-import').then((module) => {
      // use code
    })
  }
}
</script>

When the library is directly referenced (instead of a dependency), the load fails. Is this the expected behaviour? If so, the docs could mention that.

mermaid:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

<script>
export default {
  mounted() {
    import('https://cdn.skypack.dev/mermaid').then((module) => {
      // use code
    })
  }
}
</script>

Steps to reproduce

git clone [email protected]:akil-rails/vitepress-starter.git
cd vitepress-starter
pnpm i
pnpm run docs:build
pnpm run docs:serve

1. Open the URL in chrome
2. In chrome developer tools/console, you'll see the message

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

[brc-dd]

Actually that error is because invalid modulepreload link is being added:

<link rel="modulepreload" href="/base/https://cdn.skypack.dev/mermaid">

[brc-dd]

Even with the fix, I don't think mermaid works like that.

[akil-rails]

Even with the fix, I don't think mermaid works like that.

Yes, mermaid isn't working - I suppose this is because whitespace is stripped out .