当执行 git push 命令时，Github 上的外部存储库会被更新。当我运行 npm run deploy 命令时，没有与 GitHub 服务器的连接，我收到以下响应。
检查时我还收到以下响应 - 您已成功通过身份验证，但 GitHub 不提供 shell 访问。
可能是什么问题？
为什么当方法遍历数组时，ForEach第一次迭代不会从第一个数组元素对象中读取数据？只读第二次迭代。结果，仅显示三个 TemplateElement，而不是四个！ （必须有第四张卡）
const goodsTypes = [
{
id: "1",
title: "ЯЩИКИ",
link: "1",
description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
},
{
id: "2",
title: "ПОДСТАВКИ",
link: "2",
description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
},
{
id: "3",
title: "ШКАФЫ",
link: "3",
description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
},
{
id: "4",
title: "ШКАФЫ",
link: "4",
description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
},
]
const elementTemplate = document.querySelector("#goods-template").content;
const elementTitle = elementTemplate.querySelector(".goods__title");
const elementParagraph = elementTemplate.querySelector(".goods__paragraph");
const elementImage = elementTemplate.querySelector(".goods__image");
const elementPlace = document.querySelector(".goods__types");
function createTypesOfGoods(title, link, description) {
const cardElement = elementTemplate
.querySelector(".goods__container")
.cloneNode(true);
elementTitle.textContent = title;
elementImage.src = link;
elementImage.alt = title;
elementParagraph.textContent = description;
// const chooseButton = cardElement.querySelector('.elements__button');
// chooseButton.addEventListener('click', chooseCard);
return cardElement;
}
function getTypeOfGoods() {
goodsTypes.forEach(function ({ title, link, description }) {
const typeNew = createTypesOfGoods(title, link, description);
console.log(typeNew);
elementPlace.append(typeNew);
});
}
getTypeOfGoods() <body class="body">
<section class="goods__types" aria-label="Виды продукции"></section>
<template id="goods-template">
<article id="tumbs" class="goods__container">
<h2 class="goods__title"></h2>
<div class="goods__box">
<img src="" alt="" class="goods__image">
<div>
<p class="goods__paragraph"></p>
</div>
</div>
</article>
</template>
</body>
我想在 GitHub 上发布一个小项目。我使用 npm run build 命令在本地存储库中构建了它。接下来，我运行 npm run deploy 命令在我自己和 GitHub 存储库中创建一个附加分支，项目将从其中发布。 （在项目文件夹中预安装了 npm install gh-pages --save-dev ）。然而，该过程被中断并产生错误。该分支不是在 GitHub 上创建的。错误是这样的：
$ npm run deploy
[电子邮件受保护]部署 gh-pages -d dist
ProcessError: The following paths are ignored by one of your .gitignore files:
node_modules
hint: Use -f if you really want to add them.
hint: Turn this message off by running
hint: "git config advice.addIgnoredFile false"
at ChildProcess.<anonymous> (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\gh-pages\lib\git.js:42:16)
at ChildProcess.emit (node:events:518:28)
at maybeClose (node:internal/child_process:1105:16)
at ChildProcess._handle.onexit (node:internal/child_process:305:5
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
Search logs
3s
13s
3s
3s
Run actions/jekyll-build-pages@v1
/usr/bin/docker run --name ghcrioactionsjekyllbuildpagesv1013_95b8f4 --label 92df29 --workdir /github/workspace --rm -e "INPUT_SOURCE" -e "INPUT_DESTINATION" -e "INPUT_FUTURE" -e "INPUT_BUILD_REVISION" -e "INPUT_VERBOSE" -e "INPUT_TOKEN" -e "HOME" -e "GITHUB_JOB" -e "GITHUB_REF" -e "GITHUB_SHA" -e "GITHUB_REPOSITORY" -e "GITHUB_REPOSITORY_OWNER" -e "GITHUB_REPOSITORY_OWNER_ID" -e "GITHUB_RUN_ID" -e "GITHUB_RUN_NUMBER" -e "GITHUB_RETENTION_DAYS" -e "GITHUB_RUN_ATTEMPT" -e "GITHUB_ACTOR_ID" -e "GITHUB_ACTOR" -e "GITHUB_WORKFLOW" -e "GITHUB_HEAD_REF" -e "GITHUB_BASE_REF" -e "GITHUB_EVENT_NAME" -e "GITHUB_SERVER_URL" -e "GITHUB_API_URL" -e "GITHUB_GRAPHQL_URL" -e "GITHUB_REF_NAME" -e "GITHUB_REF_PROTECTED" -e "GITHUB_REF_TYPE" -e "GITHUB_WORKFLOW_REF" -e "GITHUB_WORKFLOW_SHA" -e "GITHUB_REPOSITORY_ID" -e "GITHUB_TRIGGERING_ACTOR" -e "GITHUB_WORKSPACE" -e "GITHUB_ACTION" -e "GITHUB_EVENT_PATH" -e "GITHUB_ACTION_REPOSITORY" -e "GITHUB_ACTION_REF" -e "GITHUB_PATH" -e "GITHUB_ENV" -e "GITHUB_STEP_SUMMARY" -e "GITHUB_STATE" -e "GITHUB_OUTPUT" -e "RUNNER_OS" -e "RUNNER_ARCH" -e "RUNNER_NAME" -e "RUNNER_ENVIRONMENT" -e "RUNNER_TOOL_CACHE" -e "RUNNER_TEMP" -e "RUNNER_WORKSPACE" -e "ACTIONS_RUNTIME_URL" -e "ACTIONS_RUNTIME_TOKEN" -e "ACTIONS_CACHE_URL" -e "ACTIONS_ID_TOKEN_REQUEST_URL" -e "ACTIONS_ID_TOKEN_REQUEST_TOKEN" -e "ACTIONS_RESULTS_URL" -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/SuperBox/SuperBox":"/github/workspace" ghcr.io/actions/jekyll-build-pages:v1.0.13
Configuration file: none
To use retry middleware with Faraday v2.0+, install `faraday-retry` gem
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
No such file or directory @ dir_chdir0 - /github/workspace/docs
/usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:86:in `chdir': No such file or directory @ dir_chdir0 - /github/workspace/docs (Errno::ENOENT)
from /usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:86:in `sass_load_paths'
from /usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:114:in `sass_configs'
from /usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:119:in `convert'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/renderer.rb:101:in `block in convert'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/renderer.rb:99:in `each'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/renderer.rb:99:in `reduce'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/renderer.rb:99:in `convert'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/renderer.rb:83:in `render_document'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/renderer.rb:62:in `run'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/site.rb:479:in `render_regenerated'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/site.rb:472:in `block in render_pages'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/site.rb:471:in `each'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/site.rb:471:in `render_pages'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/site.rb:192:in `render'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/site.rb:71:in `process'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/command.rb:28:in `process_site'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/commands/build.rb:65:in `build'
from /usr/local/bundle/gems/jekyll-3.10.0/lib/jekyll/commands/build.rb:36:in `process'
from /usr/local/bundle/gems/github-pages-232/bin/github-pages:70:in `block (3 levels) in <top (required)>'
from /usr/local/bundle/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `block in execute'
from /usr/local/bundle/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `each'
from /usr/local/bundle/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `execute'
from /usr/local/bundle/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in `go'
from /usr/local/bundle/gems/mercenary-0.3.6/lib/mercenary.rb:19:in `program'
from /usr/local/bundle/gems/github-pages-232/bin/github-pages:6:in `<top (required)>'
from /usr/local/bundle/bin/github-pages:25:in `load'
from /usr/local/bundle/bin/github-pages:25:in `<main>'
Error: Logging at level: debug GitHub Pages: github-pages v232 GitHub Pages: jekyll v3.10.0 Theme: jekyll-theme-primer Theme source: /usr/local/bundle/gems/jekyll-theme-primer-0.6.0 Requiring: jekyll-github-metadata Requiring: jekyll-seo-tag Requiring: jekyll-coffeescript Requiring: jekyll-commonmark-ghpages Requiring: jekyll-gist Requiring: jekyll-github-metadata Requiring: jekyll-paginate Requiring: jekyll-relative-links Requiring: jekyll-optional-front-matter Requiring: jekyll-readme-index Requiring: jekyll-default-layout Requiring: jekyll-titles-from-headings GitHub Metadata: Initializing... Source: /github/workspace/./docs Destination: /github/workspace/./docs/_site Incremental build: disabled. Enable with --incremental Generating... Generating: JekyllOptionalFrontMatter::Generator finished in 1.3666e-05 seconds. Generating: JekyllReadmeIndex::Generator finished in 6.112e-06 seconds. Generating: Jekyll::Paginate::Pagination finished in 3.236e-06 seconds. Generating: JekyllRelativeLinks::Generator finished in 2.3935e-05 seconds. Generating: JekyllDefaultLayout::Generator finished in 1.102e-05 seconds. Generating: JekyllTitlesFromHeadings::Generator finished in 6.773e-06 seconds. Rendering: assets/css/style.scss Pre-Render Hooks: assets/css/style.scss Rendering Markup: assets/css/style.scss github-pages 232 | Error: No such file or directory @ dir_chdir0 - /github/workspace/docs >
import "./pages/index.css";
import {getgoodsCards, getgoodsCards2} from "./scripts/goods.js";
// import {getgoodsCards} from "./goodsOne.js"
// import {generatePopup} from "./modals.js"
import {arrowLeft, arrowRight, nextSlide, previousSlide, addPagination} from "./scripts/slider.js";
import {getgoodsScroll1, getgoodsScroll2, getgoodsScroll3, getgoodsScroll4} from "./scripts/scroll.js";
const tipeOfBoxes = document.querySelector(".goods__image");
const tipeOfBoxes2 = document.querySelector(".goods__image-shelfs");
const scrollSlider1 = document.querySelector('.one');
const scrollSlider2 = document.querySelector('.two');
const scrollSlider3 = document.querySelector('.three');
const scrollSlider4 = document.querySelector('.four');
// Для вставки карточек в разметку
tipeOfBoxes.addEventListener('click', getgoodsCards);
// Для вставки карточек в разметку
tipeOfBoxes2.addEventListener('click', getgoodsCards2);
// Для открытия модального окна
// tipeOfBoxes.addEventListener('click', generatePopup)
scrollSlider1.addEventListener('click', getgoodsScroll1);
scrollSlider2.addEventListener('click', getgoodsScroll2);
scrollSlider3.addEventListener('click', getgoodsScroll3);
scrollSlider4.addEventListener('click', getgoodsScroll4);
arrowLeft.addEventListener("click", previousSlide);
arrowRight.addEventListener("click", nextSlide);
addPagination();
// setInterval(showImage, 3000);
// setInterval(changeSlides, 3000);
// changeSlides, showImage运行 webpack 时会出现语法错误。如何理解在哪一行代码中查找错误？
`Html Webpack Plugin:
错误：子编译失败：模块构建失败（来自 ./node_modules/html-webpack-plugin/lib/loader.js）：语法错误：意外的标记“.”`
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name='description' content='Сайт производителя индивидуальной мебели'>
<meta name='keywords' content='html, css'>
<meta name="author" content="Анатолий">
<!-- <link rel="stylesheet" href="./pages/index.css"> -->
<title>ЯЩИЧКИ & ЯЩИКИ</title>
</head>
<body class="body">
<header class="header">
<img src="<%=require('./images/logo-nuts.jpg'%>" alt="логотип" class="header__logo">
<button type="button" class="header__button">ЗАКАЗАТЬ ПО ВАШИМ РАЗМЕРАМ ЛЮБОЙ ТОВАР</button>
</header>
<main class="page">
<section class="message">
<h1 class="message__title">ЯЩИЧКИ & ЯЩИКИ</h1>
<p class="message__subtitle">Производство деревянных ящиков для хранения вещей и продуктов по Вашим индивидуальным
размерам</p>
</section>
<section id="slider-container">
<div id="top">
<img src="<%=require('./images/211689_left_arrow_icon.png')%>" alt="" class="arrow arrow-left">
<div id="frame">
<div id="slider">
<img src="<%=require('./images/boxes.jpg')%>" alt="" class="slider-image">
<img src="<%=require('./images/tumbs.jpg')%>" alt="" class="slider-image">
<img src="<%=require('./images/shellboxes.jpg')%>" alt="" class="slider-image">
<img src="<%=require('./images/shells.jpg')%>" alt="" class="slider-image">
</div>
</div>
<img src="<%=require('../images/211689_left_arrow_icon.png')%>" alt="" class="arrow arrow-right">
</div>
<div id="bottom"></div>
</section>
<section class="goods" aria-label="Виды продукции">
<article id="boxes" class="goods__container">
<h2 class="goods__title">ЯЩИКИ</h2>
<div class="goods__box">
<img src="<%=require('./images/P1722526.jpg')%>" alt="фото Ящики" class="goods__image">
<div>
<p class="goods__paragraph">ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</article>
</section>
<section class="goods" aria-label="Виды продукции">
<article id="shelfs" class="goods__container">
<h2 class="goods__title2">ПОДСТАВКИ</h2>
<div class="goods__box2">
<img src="<%=require('./images/tumbs.jpg')%>" alt="фото Ящики" class="goods__image-shelfs">
<div>
<p class="goods__paragraph">ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</article>
</section>
<section class="goods" aria-label="Виды продукции">
<article id="bigboxes" class="goods__container">
<h2 class="goods__title">ШКАФЫ</h2>
<div class="goods__box">
<img src="<%=require('./images/shellboxes.jpg')%>" alt="фото Ящики" class="goods__image">
<div>
<p class="goods__paragraph">ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</article>
</section>
<section class="goods" aria-label="Виды продукции">
<article id="tumbs" class="goods__container">
<h2 class="goods__title">ТУМБЫ</h2>
<div class="goods__box">
<img src="<%=require('./images/shells.jpg')%>" alt="фото Ящики" class="goods__image">
<div>
<p class="goods__paragraph">ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</article>
</section>
<!-- <section class="cover">
<a href="https://stampsy.com/na-elektrichkakh-do-baikala" class="cover__overlay" target="_blank">
<h2 class="cover__title">До Байкала «на собаках»</h2>
<p class="cover__subtitle">По мотивам учебной темы о Транссибе — путешествие от столицы до Байкала на
электричках.
</p>
</a>
</section> -->
</main>
<footer class="footer">
<nav>
<ul class="footer__links">
<li><a href="https://travel.yandex.ru" class="footer__link" target="_blank">телефон</a></li>
<li><a href="https://travel.yandex.ru" class="footer__link" target="_blank">e-mail</a></li>
</ul>
</nav>
<p class="footer__copyright">2023 AM studio</p>
</footer>
<!-- <div class="popup">
<div class="popup__content">
</div>
<button type="button" class="popup__close"></button>
</div> -->
<!-- <script type="module" src="./scripts/index.js"></script> -->
<template id="card-template">
<div class="elements__card">
<h2 class="elements__name"></h2>
<img class="elements__image" src="" alt=""/>
<!-- <button type="button" class="elements__heart"></button> -->
<!-- <button type="button" class="elements__button">ВЫБРАТЬ</button> -->
</div>
</template>
</body>
</html>Html Webpack Plugin:
Error: Child compilation failed:
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token ';'
at Function ()
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:14942:16
at apply (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:487:27)
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:15326:16
at apply (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:489:27)
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:6627:16
at Function.template (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:14941:20)
at module.exports (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\html-webpack-plugin\lib\loader.js:32:22)
ModuleBuildError: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token ';'
at Function ()
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:14942:16
at apply (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:487:27)
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:15326:16
at apply (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:489:27)
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:6627:16
at Function.template (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\lodash\lodash.js:14941:20)
at module.exports (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\html-webpack-plugin\lib\loader.js:32:22)
at processResult (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\webpack\lib\NormalModule.js:889:19)
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\webpack\lib\NormalModule.js:1030:5
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\loader-runner\lib\LoaderRunner.js:400:11
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\loader-runner\lib\LoaderRunner.js:252:18
at runSyncOrAsync (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\loader-runner\lib\LoaderRunner.js:156:3)
at iterateNormalLoaders (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\loader-runner\lib\LoaderRunner.js:251:2)
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\loader-runner\lib\LoaderRunner.js:224:4
at C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\webpack\lib\NormalModule.js:984:15
at Array.eval (eval at create (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
at runCallbacks (C:\Users\Пресс-служба\dev\My_PET_Projects\SuperBox\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:45:15)
- Function
- lodash.js:14942
[SuperBox]/[lodash]/lodash.js:14942:16
- lodash.js:487 apply
[SuperBox]/[lodash]/lodash.js:487:27
- lodash.js:15326
[SuperBox]/[lodash]/lodash.js:15326:16
- lodash.js:489 apply
[SuperBox]/[lodash]/lodash.js:489:27
- lodash.js:6627
[SuperBox]/[lodash]/lodash.js:6627:16
- lodash.js:14941 Function.template
[SuperBox]/[lodash]/lodash.js:14941:20
- loader.js:32 module.exports
[SuperBox]/[html-webpack-plugin]/lib/loader.js:32:22
- ModuleBuildError: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
- SyntaxError: Unexpected token ';'
- Function
- lodash.js:14942
[SuperBox]/[lodash]/lodash.js:14942:16
- lodash.js:487 apply
[SuperBox]/[lodash]/lodash.js:487:27
- lodash.js:15326
[SuperBox]/[lodash]/lodash.js:15326:16
- lodash.js:489 apply
[SuperBox]/[lodash]/lodash.js:489:27
- lodash.js:6627
[SuperBox]/[lodash]/lodash.js:6627:16
- lodash.js:14941 Function.template
[SuperBox]/[lodash]/lodash.js:14941:20
- loader.js:32 module.exports
[SuperBox]/[html-webpack-plugin]/lib/loader.js:32:22
- NormalModule.js:889 processResult
[SuperBox]/[webpack]/lib/NormalModule.js:889:19
- NormalModule.js:1030
[SuperBox]/[webpack]/lib/NormalModule.js:1030:5
- LoaderRunner.js:400
[SuperBox]/[loader-runner]/lib/LoaderRunner.js:400:11
- LoaderRunner.js:252
[SuperBox]/[loader-runner]/lib/LoaderRunner.js:252:18
- LoaderRunner.js:156 runSyncOrAsync
[SuperBox]/[loader-runner]/lib/LoaderRunner.js:156:3
- LoaderRunner.js:251 iterateNormalLoaders
[SuperBox]/[loader-runner]/lib/LoaderRunner.js:251:2
- LoaderRunner.js:224
[SuperBox]/[loader-runner]/lib/LoaderRunner.js:224:4
- NormalModule.js:984
[SuperBox]/[webpack]/lib/NormalModule.js:984:15
- CachedInputFileSystem.js:45 runCallbacks
[SuperBox]/[enhanced-resolve]/lib/CachedInputFileSystem.js:45:15
- child-compiler.js:174
[SuperBox]/[html-webpack-plugin]/lib/child-compiler.js:174:18
- Compiler.js:627 finalCallback
[SuperBox]/[webpack]/lib/Compiler.js:627:5
- Compiler.js:662
[SuperBox]/[webpack]/lib/Compiler.js:662:11
- Compiler.js:1348
[SuperBox]/[webpack]/lib/Compiler.js:1348:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[SuperBox]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1344
[SuperBox]/[webpack]/lib/Compiler.js:1344:33
- Compilation.js:2925 finalCallback
[SuperBox]/[webpack]/lib/Compilation.js:2925:11
- Compilation.js:3238
[SuperBox]/[webpack]/lib/Compilation.js:3238:11
启动后，forEach程序会遍历卡片数据数组，并根据传递的模板创建每张卡片（这可以在控制台中看到）。
然而，当使用该方法将卡片显示在屏幕上的适当位置时，append()每张新卡片都会覆盖前一张卡片，但必须插入到它之前。因此，屏幕上仅保留最后创建的卡片。
代码有什么问题吗？
const boxesImages = [
{
name: "Box1",
link: "../images/boxes.JPG",
},
{
name: "Box2",
link: "../images/shellboxes.JPG",
},
{
name: "Box3",
link: "../images/shells.JPG",
},
{
name: "Box4",
link: "../images/tumbs.JPG",
},
{
name: "Box5",
link: "../images/boxes.JPG",
},
]
const elementTemplate = document.querySelector('#card-template').content;
const elementPlace = document.querySelector('.elements__list');
const cardElement = elementTemplate.querySelector('.elements__card').cloneNode(true);
function createCard(link, name) {
cardElement.querySelector('.elements__image').src = link;
cardElement.querySelector('.elements__name').textContent = name;
cardElement.querySelector('.elements__image').alt = name;
const chooseButton = cardElement.querySelector('.elements__button');
chooseButton.addEventListener('click', chooseCard);
return cardElement;
};
function chooseCard() {
return console.log("Good")
}
boxesImages.forEach(function({ link, name }) {
const cardNew = createCard(link, name);
elementPlace.append(cardNew);
console.log(cardNew);
console.log("cardNew")
});<!DOCTYPE html>
<body class="body">
<section class="elements" aria-label="Карточки товара">
<ul class="elements__list">
</ul>
</section>
<template id="card-template">
<li class="elements__card">
<h2 class="elements__name"></h2>
<img class="elements__image" src="" alt="" />
<!-- <button type="button" class="elements__heart"></button> -->
<button type="button" class="elements__button">ВЫБРАТЬ</button>
</li>
</template>
</body>
</html>