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

executeScript does not support ES modules #2010

Open
1 task done
sanand0 opened this issue Apr 2, 2023 · 3 comments
Open
1 task done

executeScript does not support ES modules #2010

sanand0 opened this issue Apr 2, 2023 · 3 comments
Assignees

Comments

@sanand0
Copy link

sanand0 commented Apr 2, 2023

Bug Report

Currently, executeScript: true does not run ES Modules and throws an Uncaught SyntaxError: Cannot use import statement outside a module.

Steps to reproduce

index.html:

<div id="app"></div>
<script>
  window.$docsify = {
    executeScript: true
  };
</script>

README.md:

<script type="module">
  import { rgb } from "https://cdn.skypack.dev/d3-color@3";
</script>

What is current behaviour

It throws an Uncaught SyntaxError: Cannot use import statement outside a module

What is the expected behaviour

Run the script as an ES module (or mention in the documentation that ES modules and imports are not supported.)

Other relevant information

  • Bug does still occur when all/other plugins are disabled?

  • Your OS: Windows

  • Node.js version: 18.4.0

  • npm/yarn version: npm 8.12.1

  • Browser version: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

  • Docsify version: 4.13.0

  • Docsify plugins: None

Please create a reproducible sandbox

Edit 307qqv236

Mention the docsify version in which this bug was not present (if any)

docsify 4.13.0

@trusktr trusktr self-assigned this Jul 4, 2023
@trusktr
Copy link
Member

trusktr commented Jul 4, 2023

Indeed! The fix should be easy.

@trusktr
Copy link
Member

trusktr commented Jul 7, 2023

Btw, for now, to emulate a type=module script like this one:

<script type="module" src="./main.js"></script>

you can write it like this:

<script>
const runMain = () => import('./main.js')
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", runMain);
else runMain();
</script>

The second is essentially what the first one is doing, and the first one is syntax sugar.

@sanand0
Copy link
Author

sanand0 commented Jul 7, 2023

Thanks, @trusktr. Since I'm using ESM to simplify examples, I'll await the fix you mentioned. Very grateful! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants