Konsola wyrzuca błąd gdy moduł importowany lecz gdy kod z modułu bezpośrednio w pliku bez importu błąd się nie pojawia

Question

Witam serdecznie, jak w temacie - konsola wyrzuca błąd gdy importuje moduł do pliku script.js lecz gdy kod znajduje się bezpośrednio w pliku bez importu błąd się nie pojawia. StackOverflow podpowiada że może to być spowodowane brakującym ; lecz nie znalazłem miejsca gdzie mogło by go brakować.

importowany kod:

/* eslint-disable no-promise-executor-return */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-await-in-loop */
/* eslint-disable no-sequences */
/* eslint-disable no-unused-vars */
import domModule from "../DOM-modules/dom-module";
import gameboardFactory from "../factory-fns/gameboard-factory";
import playerFactory from "../factory-fns/player-factory";
import { qs } from "../utility-fns/utility-fns";

const gameLoop = (() =>
{
  const playerGameboard = gameboardFactory();
  const aiGameboard = gameboardFactory();
  const humanPlayer = playerFactory();
  const ai = playerFactory();
  const dom = domModule();
  ai.switchTurn();

  playerGameboard.placeShip("carrier", [0, 0]);
  playerGameboard.placeShip("battleship", [0, 2]);
  playerGameboard.placeShip("crusier", [0, 4]);
  playerGameboard.placeShip("submarine", [0, 6]);
  playerGameboard.placeShip("destroyer", [0, 8]);

  aiGameboard.placeShip("carrier", [0, 0]);
  aiGameboard.placeShip("battleship", [0, 2]);
  aiGameboard.placeShip("crusier", [0, 4]);
  aiGameboard.placeShip("submarine", [0, 6]);
  aiGameboard.placeShip("destroyer", [0, 8]);

  dom.generateBasic();
  dom.renderGameboard(playerGameboard, "player");
  dom.renderShips(playerGameboard, "player");
  dom.renderGameboard(aiGameboard, "ai");

  const aiLoop = () =>
  {
    const timer = (time) => new Promise((res) => setTimeout(res, time)); // https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop
    async function load() // this async function is to deley ai movments - to be more visible for player
    {
      while (ai.getTurn()) // ai will take shots untill missed shot
      {
        await timer(1000);
        ai.attack(ai.randomCoord(playerGameboard), playerGameboard),
        dom.renderGameboard(playerGameboard, "player");
        dom.renderShips(playerGameboard, "player");
      }
      humanPlayer.switchTurn();
      dom.turnIndicator(humanPlayer.getTurn());
    }
    load();
  };

  const addEvents = (() =>
  {
    document.addEventListener("mousedown", (e) =>
    {
      if (humanPlayer.getTurn())
      {
        if (
          (e.target.dataset.owner === "ai")
        && !(e.target.className === "field hit"))
        {
          humanPlayer.attack([
            [e.target.dataset.firstcoord],
            [e.target.dataset.secondcoord],
          ], aiGameboard);

          dom.renderGameboard(aiGameboard, "ai");
          dom.turnIndicator(humanPlayer.getTurn());

          if (!humanPlayer.getTurn())
          {
            ai.switchTurn();
            aiLoop();
          }
        }
      }
    });

    qs("input").addEventListener("input", () =>
    {
      dom.editPlayerName();
      dom.reRenderPlayerBoardName();
    });
  })();
})();

export default gameLoop;

index.js :

/* eslint-disable no-promise-executor-return */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-await-in-loop */
/* eslint-disable no-sequences */
/* eslint-disable no-unused-vars */
import style from "./style.css";
import gameLoop from "./game-loop/game-loop";
import addEvents from "./event-handler-module/event-handler";

gameLoop();

Błąd - (wskazuje tylko na gameLoop() w index.js.

treść błędu:

Uncaught TypeError: (intermediate value)(intermediate value)(...) is not a function
    at index.js:10:1
    at index.js:10:1
    at index.js:10:1

Dodam, że kod działa pomimo błędu.

Czy ktoś jest w stanie wskazać mi rozwiązanie problemu?

Link do repo: https://github.com/MaciejDabrowskii/PROJECT-BATTLESHIP

Z góry dzięki za odpowiedzi i poświęcony czas! ;)

 

Comments

@castor_fiber, a jak wypiszesz do konsoli zaimportowany gameLoop, to co się wyświetli? Bo w obecnej formie ta zmienna wygląda, jakby przechowywała undefined implicytnie zwrócony z IIFE. Tylko, że w takim przypadku - w miejscu wywołania (tam, gdzie importujesz) - błąd powinien mówić, że to nie jest funkcja.

---

@castor_fiber, Cześć, dzięki za odpowiedz. kod jest spakowany webpackiem więc konsola wyświetli undefined. index.js jest źródłem dla paczki. - mam ustawiony inline-source-map - więc consola powinna wskazywać pełną ścieżkę błędu ale wyrzuca tylko błąd w    

    index.js:10:1
    at index.js:10:1
    at index.js:10:1

Answer 1

a jesteś pewny, że ścieżka do Modułu jest odpowiednia, nie wiem o który moduł chodzi.
Jest on dodany w konfiguratorze dla aplikacji ? 

Jeśli domModule  to np  interfejs to wtedy brakuje ci nawiasów 

import {domModule} from "../DOM-modules/dom-module";

byc może nazwa własna nie jest rozpoznawana, chyba że export jest przez  DEFAULT wtedy jesli to jest defaultowy export to mozesz napisac tak bez nawiasów 

export default domModule() { }    // Default export 

 

Comments

Cześć, dzięki za odpowiedz. domModule jest funkcją factory

i wydaje mi się, że jest importowana poprawnie ponieważ generuje całą zawartość strony.

Całość aplikacji działa poprawnie bez błędów poza tym jednym podczas ładowania strony i tylko gdy zawartość pliku game-loop jest importowana. Jeśli wkleję kod z  game-loop bezpośrednio do index.js błąd się nie pojawia.

kod dom-module.js:

/* eslint-disable no-dupe-keys */
/* eslint-disable max-len */
/* eslint-disable no-unused-vars */
import {
  qs, qsa, addGlobalEventListener, createElement,
} from "../utility-fns/utility-fns";

const domModule = () =>
{
  let playerName = "";

  const editPlayerName = () =>
  {
    playerName = qs("input").value;
  };

  const generateBasic = () =>
  {
    document.body.append(
      createElement("div", {
        class: "wrapper",
      }),
    );

    qs(".wrapper").append(

      createElement("h1", {
        text: "Battle Ship",
        class: "header",
      }),

      createElement("div", {
        class: "player-name-input-container",
      }),

      createElement("div", {
        class: "game-contents",
      }),

      createElement("div", {
        class: "turn-indicator",
      }),
    );

    qs(".player-name-input-container").append(

      createElement("label", {
        for: "text",
        text: "Enter player name:",
      }),

      createElement("input", {
        type: "text",
        id: "player-name",
      }),

    );

    qs(".turn-indicator").append(
      createElement("h3", {
        text: "Turn: ",
        class: "turn-indicator-header",
      }),

      createElement("div", {
        class: "turn-indicator-player",
      }),
    );

    qs(".game-contents").append(

      createElement("div", {
        class: "player-section",
      }),

      createElement("div", {
        class: "ai-section",
      }),
    );

    qs(".player-section").append(

      createElement("p", {
        text: `${playerName} - board`,
        class: "board-name",
        id: "board-name-player",
      }),

      createElement("div", {
        class: "player-board",
      }),
    );

    qs(".ai-section").append(

      createElement("p", {
        class: "board-name",
        text: "ai - board",
      }),

      createElement("div", {
        class: "ai-board",
      }),
    );
  };

  const reRenderPlayerBoardName = () =>
  {
    qs("#board-name-player").textContent = `${playerName} - board`;
  };

  const renderShips = (gameboard, owner) =>
  {
    gameboard.getShipsNames().forEach((shipName) =>
    {
      gameboard.getShips()[shipName]
        .getShipArea()
        .forEach((area) =>
        {
          qs(
            `[data-owner="${owner}"][data-firstcoord="${area[0]}"][data-secondcoord="${area[1]}"]`,
          )
            .classList
            .add("ship");
        });
    });
  };

  const renderHits = (gameboard, owner) =>
  {
    gameboard.getShipsNames().forEach((shipName) =>
    {
      gameboard.getShips()[shipName]
        .getShipBody()
        .forEach((area) =>
        {
          if (typeof (area) === "object")
          {
            const field = qs(`[data-owner="${owner}"][data-firstcoord="${area[0]}"][data-secondcoord="${area[1]}"]
            `);
            field.classList.add("hit");
            field.textContent = "";
          }
        });
    });
  };

  const renderMissedAttacks = (gameboard, owner) =>
  {
    gameboard.getFieldStatus().missedAttacks.forEach((miss) =>
    {
      qs(`[data-owner="${owner}"][data-firstcoord="${miss[0]}"][data-secondcoord="${miss[1]}"]`)
        .textContent = "✘";
    });
  };

  const renderGameboard = (gameboard, owner) =>
  {
    qs(`.${owner}-board`).innerHTML = "";

    gameboard.getBoard().forEach((array, firstIndex) =>
    {
      qs(`.${owner}-board`)
        .append(
          createElement("div", {
            class: "column",
            "data-column": `${firstIndex}`,
            "data-owner": `${owner}`,
          }),
        );
    });

    qsa(`.column[data-owner="${owner}"]`).forEach((column, columnIndex) =>
    {
      let i = 0;
      while (i < 10)
      {
        column.append(
          createElement("div", {
            class: "field",
            "data-owner": `${owner}`,
            "data-firstCoord": `${columnIndex}`,
            "data-secondCoord": `${i}`,
          }),
        );
        i += 1;
      }
    });
    renderHits(gameboard, `${owner}`);
    renderMissedAttacks(gameboard, `${owner}`);
  };

  const turnIndicator = (playerTurn) =>
  {
    switch (playerTurn)
    {
      case true:
        qs(".turn-indicator-player").textContent = playerName;
        break;
      case false:
        qs(".turn-indicator-player").textContent = "AI";
        break;
      default:
    }
  };

  return {
    generateBasic,
    renderGameboard,
    renderShips,
    reRenderPlayerBoardName,
    editPlayerName,
    turnIndicator,
  };
};

export default domModule;

 

---

wrzuć informacje o tym jaki błąd dokładnie lint zgłasza.

---

błędy linta w game-loop:

linia 34:

function setTimeout<[value: any]>(callback: (value: any) => void, ms?: number, value: any): NodeJS.Timeout (+4 overloads)
namespace setTimeout

Return values from promise executor functions cannot be read.eslintno-promise-executor-return

linia 39: Unexpected `await` inside a loop

// tu opis ze stacka odnośnie while i asynchronicznego kodu wg którego napisałem funkcję aiLoop - która być może jest problemem:

https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop

linia 50: Element „addEvents” jest zadeklarowany, ale jego wartość nie jest nigdy odczytywana.

// addEvents jest samowykonującą się funkcją (()=>{})

 

---

Problem rozwiązany.

w gameLoop:

zmiana exportu na:

export const gameLoop = () =>

{}

w index.js:

import { gameLoop } from "./game-loop/game-loop";

gameLoop();

 

Dziękuję serdecznie za pomoc i poświęcony czas! ;)

Answer 2

Spróbuj wyeksportować funkcję gameLoop, zamiast zwróconego z niej wyniku:

export default function gameLoop() {
  // kod funkcji
}

////
import gameLoop from 'path/to/game-loop/module';

gameLoop();

 

Comments

Problem rozwiązany.

w gameLoop:

zmiana exportu na:

export const gameLoop = () =>

{}

w index.js:

import { gameLoop } from "./game-loop/game-loop";

gameLoop();

 

Dziękuję serdecznie za pomoc i poświęcony czas! ;)