I'm migrating the old Jekyll project that I've started to Docusaurus. The old code just included script tags in HTML. This is the JSX code that I use to load those scripts:
import Head from '@docusaurus/Head';
export default function Interpreter(): JSX.Element {
return (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/@jcubic/lips@beta/dist/std.xcb" as="fetch"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jcubic/lips@beta/dist/lips.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/jquery.terminal/js/jquery.terminal.min.js,npm/js-polyfills/keyboard.js,npm/prismjs/prism.js,npm/jquery.terminal/js/prism.js,npm/prismjs/components/prism-scheme.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jcubic/lips@beta/lib/js/terminal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jcubic/lips@beta/lib/js/prism.js"></script>
<script src="/js/interpreter.js"></script>
</Head>
</>
);
};
But errors that jQuery, Prism, and $ are not defined.
It seems that those scripts are executed out of order or all at once (if that's possible).
Why are they executed without waiting for the previous script to load and execute? How to make them run in a sequence?
I've tried to add defer and async on the script but it doesn't make a difference.