I have an html file where I import a JS module from chessboard.js
<html lang="en">
<head>
<link rel="stylesheet" href="./chessboardFiles/css/chessboard-1.0.0.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script id="import" src="./chessboardFiles/js/chessboard-1.0.0.js"></script>
<title></title>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board2 = Chessboard("board1", "start");
</script>
</body>
</html>
The only problem is that I want to write what's in the body's <script> tag in a separate JS file then add it to this html document via <script src='...'> however the <script id="import" ...> file that is imported is not exactly a module so I cant just do import * as C from chessboard-1.0.0.js in a new JS file because I get a
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. error in the console.
So is there any way to get the variables available in the HTML document (i.e Chessboard()) available in an external JS file? How could I do this?
You could write to global window variables, or have everything in the window scope. Ex: window.board = Chessboard(...), and you can access that from different files if the script is run later than the definition.