Javascript 创建新私有属性时显示错误的VSCode

我正在使用VSCode中的Parcel进行一个项目。我试图重构我的MVC代码，但是在创建新类RecipeView时，VSC显示错误，而没有说明问题的具体原因。如果有人能告诉我问题是什么，我将不胜感激，因为在过去的3个小时里，我一直在阅读关于类和构造函数的所有内容，但我没有拿出任何解决问题的方法

以下是我创建的类的代码：

import icons from 'url:../../img/icons.svg';

class RecipeView {
  #parentElement = document.querySelector('.recipe');
  #data;

  render(data) {
    this.#data = data;
    const markup = this.#generateMarkup;
    this.#clear;
    this.#parentElement.insertAdjacentHTML('afterbegin', markup);
  }

  #clear() {
    this.#parentElement.innerHTM = '';
  }

  renderSpinner = function name() {
    const markup = ` 
        <div class="spinner">
        <svg>
          <use href="${icons}#icon-loader"></use>
        </svg>
      </div>`;
    this.#parentElement.innerHTML = '';
    this.#parentElement.insertAdjacentHTML('afterbegin', markup);
  };

  #generateMarkup() {
    return `
    <figure class="recipe__fig">
      <img src="${this.#data.image}" alt="${
      this.#data.title
    }" class="recipe__img" />
      <h1 class="recipe__title">
        <span>${this.#data.title}</span>
      </h1>
    </figure>

    <div class="recipe__details">
      <div class="recipe__info">
        <svg class="recipe__info-icon">
          <use href="${icons}#icon-clock"></use>
        </svg>
        <span class="recipe__info-data recipe__info-data--minutes">${
          this.#data.cookingTime
        }</span>
        <span class="recipe__info-text">minutes</span>
      </div>
      <div class="recipe__info">
        <svg class="recipe__info-icon">
          <use href="${icons}#icon-users"></use>
        </svg>
        <span class="recipe__info-data recipe__info-data--people">${
          this.#data.servings
        }</span>
        <span class="recipe__info-text">servings</span>

        <div class="recipe__info-buttons">
          <button class="btn--tiny btn--increase-servings">
            <svg>
              <use href="${icons}#icon-minus-circle"></use>
            </svg>
          </button>
          <button class="btn--tiny btn--increase-servings">
            <svg>
              <use href="${icons}#icon-plus-circle"></use>
            </svg>
          </button>
        </div>
      </div>

      <div class="recipe__user-generated">
        <svg>
          <use href="${icons}#icon-user"></use>
        </svg>
      </div>
      <button class="btn--round">
        <svg class="">
          <use href="${icons}#icon-bookmark-fill"></use>
        </svg>
      </button>
    </div>

    <div class="recipe__ingredients">
      <h2 class="heading--2">Recipe ingredients</h2>
      <ul class="recipe__ingredient-list">
        ${this.#data.ingredients
          .map(ingredient => {
            return `<li class="recipe__ingredient">
        <svg class="recipe__icon">
          <use href="${icons}#icon-check"></use>
        </svg>
        <div class="recipe__quantity">${
          ingredient.quantity != null ? ingredient.quantity : ''
        }</div>
        <div class="recipe__description">
          <span class="recipe__unit">${ingredient.unit}</span>
          ${ingredient.description}
        </div>
        </li>
       `;
          })
          .join('')}
          </ul>
      </div>

    <div class="recipe__directions">
      <h2 class="heading--2">How to cook it</h2>
      <p class="recipe__directions-text">
        This recipe was carefully designed and tested by
        <span class="recipe__publisher">${
          this.#data.publisher
        }</span>. Please check out
        directions at their website.
      </p>
      <a
        class="btn--small recipe__btn"
        href="${this.#data.sourceUrl}"
        target="_blank"
      >
        <span>Directions</span>
        <svg class="search__icon">
          <use href="${icons}#icon-arrow-right"></use>
        </svg>
      </a>
    </div>
`;
  }
}

export default new RecipeView();

非常感谢你的建议

编辑： 在这里，我还发布了来自控制器的代码：

import * as model from './model.js';
import icons from 'url:../img/icons.svg';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import recipeView from './views/recipeView.js';

const recipeContainer = document.querySelector('.recipe');
        
const renderSpinner = function name(parentEl) {
  const markup = ` 
      <div class="spinner">
      <svg>
        <use href="${icons}#icon-loader"></use>
      </svg>
    </div>`;
  parentEl.innerHTML = '';
  parentEl.insertAdjacentHTML('afterbegin', markup);
};

const showRecipe = async function () {
  try {
    const id = window.location.hash.slice(1);
    //Loading recipe

    if (!id) return;
    renderSpinner(recipeContainer);
    await model.loadRecipe(id);
    //Rendering recipe
    recipeView.render(model.state.recipe);
  } catch (err) {
    alert(err);
  }
};

// window.addEventListener('hashchange', showRecipe);
// window.addEventListener('load', showRecipe);

['hashchange', 'load'].forEach(e => window.addEventListener(e, showRecipe));

import*as model from./model.js'；
从“url:../img/icons.svg”导入图标；
导入“core js/stable”；
导入“再生器运行时/运行时”；
从“/views/recipeView.js”导入recipeView；
const recipeContainer=document.querySelector（'.recipe'）；
const renderSpinner=函数名（parentEl）{
常量标记=`
`;
parentEl.innerHTML=''；
parentEl.insertAdjacentHTML（'afterbegin'，markup）；
};
const showRecipe=异步函数（）{
试一试{
const id=window.location.hash.slice（1）；
//装载配方
如果（！id）返回；
renderSpinner（recipeContainer）；
等待模型。加载配方（id）；
//渲染配方
recipeView.render（model.state.recipe）；
}捕捉（错误）{
警惕（err）；
}
};
//addEventListener（'hashchange'，showRecipe）；
//window.addEventListener（'load'，showRecipe）；
['hashchange'，'load'].forEach（e=>window.addEventListener（e，showRecipe））；

我尝试从头开始重做，但问题依然存在。我检查了W3Scools和MDN等站点上的所有可用信息，但没有任何相关信息。谁能帮我个忙吗？

import * as model from './model.js';
import icons from 'url:../img/icons.svg';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import recipeView from './views/recipeView.js';

const recipeContainer = document.querySelector('.recipe');
        
const renderSpinner = function name(parentEl) {
  const markup = ` 
      <div class="spinner">
      <svg>
        <use href="${icons}#icon-loader"></use>
      </svg>
    </div>`;
  parentEl.innerHTML = '';
  parentEl.insertAdjacentHTML('afterbegin', markup);
};

const showRecipe = async function () {
  try {
    const id = window.location.hash.slice(1);
    //Loading recipe

    if (!id) return;
    renderSpinner(recipeContainer);
    await model.loadRecipe(id);
    //Rendering recipe
    recipeView.render(model.state.recipe);
  } catch (err) {
    alert(err);
  }
};

// window.addEventListener('hashchange', showRecipe);
// window.addEventListener('load', showRecipe);

['hashchange', 'load'].forEach(e => window.addEventListener(e, showRecipe));