I want to make a chess game by using chess.js and chessboard.js in my laravel project. I am following the documentation of chessboard
In the head section of my blade template I imported the library in a script tag as below:
<script>
import ChessBoard from "chessboardjs";
const board1 = ChessBoard("board1", {
position: 'start',
showNotation: false
})
</script>
And in the body section I made a div with id 'board1'
<div id="board1" style="width: 400px"></div>
Following is my complete blade template
<!DOCTYPE html>
<html>
<head>
<script>
import ChessBoard from "chessboardjs";
const board1 = ChessBoard("board1", {
position: 'start',
showNotation: false
})
</script>
</head>
<body>
<div id="board1" style="width: 400px"></div>
</body>
</html>
I am expecting to see chess board in the browser but nothing is displayed but an error in the console "Uncaught SyntaxError: Cannot use import statement outside a module" I also wrote script code in a separate js file and tried to import it but problem still exists. Kindly guide how can I use chess.js and chessboard.js in my laravel/ vue project. Bundle of thanks