'Importing mathjs while using Lit: The requested module 'complex.js' does not provide an export named 'default'

I'm attempting to use mathjs within a Lit project to use matrices within my calculations, but I keep receiving this error.

The requested module './../../../../../complex.js/complex.js' does not provide an export named 'default' (at Complex.js:1:8)

Earlier I had the same error involving another script within the same module, typed-function.js, but fixed it by adding the word default in the exported function. Now I seem to have this issue with complex.js as well, regardless of whether I add the default keyword or not. I also didn't have this error in a different project using the exact same mathjs import (though that one didn't use lit), and didn't need to manually enter 'default' in each script that time, so I'm thinking there's something else going on here that I'm missing, or that I'm doing something else incorrectly.

I receive the same errors whether I actually attempt to use any matrices or mathematical functions in my code or not, so it seems to be an issue with the import itself (or the way I'm importing it).

Here's my app.js:

import {html, css, LitElement} from 'lit';
import {matrix} from 'mathjs'

//Initial turn (X goes first)
var turn = "X";

export class GameBoard extends LitElement {    
    static properties = {
        gameMatrix: {type: Array},
    };
    constructor() { 
        super();
        this.gameMatrix = [[0,0,0],[0,0,0],[0,0,0]]
    }
    _move = (e) => {
        e.target.innerHTML = turn;
        var index = e.target.name;
        const parse = index.split(",")
        const i = parseInt(parse[0]);
        const j = parseInt(parse[1]);
        if(turn === "X") {
            this.gameMatrix[i][j] = 1;
            turn = "O";
            this.checkWin(this.gameMatrix);   
        } else {
            this.gameMatrix[i][j] = -1;
            turn = "X";
            this.checkWin(this.gameMatrix);
        }
        e.target.disabled = true;
    };
    checkWin(arr) {
        //Empty for now, was only using to log tests
    }
    render() {
        return html`<style> @import "./game-board-style.css"; </style>
        <div id="gridwrapper">
            <!--Row 1-->
            <button type="button" class="cell" name="0,0" @click="${this._move}"></button>
            <button type="button" class="cell" name="0,1" @click="${this._move}"></button>
            <button type="button" class="cell" name="0,2" @click="${this._move}"></button>
            
            <!--Row 2-->
            <button type="button" class="cell" name="1,0" @click="${this._move}"></button>
            <button type="button" class="cell" name="1,1" @click="${this._move}"></button>
            <button type="button" class="cell" name="1,2" @click="${this._move}"></button>

            <!--Row 3-->
            <button type="button" class="cell" name="2,0" @click="${this._move}"></button>
            <button type="button" class="cell" name="2,1" @click="${this._move}"></button>
            <button type="button" class="cell" name="2,2" @click="${this._move}"></button>
        </div>`;
    }
}

customElements.define('game-board', GameBoard);

Here's my index.html:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./style.css">
    <script type="module" src="./app.js"></script>
    <script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
</head>
<body>
    <h3>Tic Tac Toe</h3>
    <p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>    
    <game-board></game-board>
    <score-board></score-board>
</body>
</html>

I've also tried different variations of importing mathjs (such as simply doing import 'mathjs' with no success, and uninstalled and reinstalled all modules. Is there something I'm missing or doing incorrectly with the way I'm importing?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Importing mathjs while using Lit: The requested module 'complex.js' does not provide an export named 'default'

Sources

Related Questions