Javascript 余烬快速启动：将JS文件添加到第一个组件时，找不到模块“@glimmer/component”

我刚开始使用余烬。我已经遇到了一些问题，其中描述了组件的hbs和js文件都应该放在app/components中。它在我的机器上工作的唯一方式是使用app/components中的js文件，而不是app/templates/components中的hbs文件。这也是余烬生成组件人员列表所做的

现在，还有另一个问题：people-list.js中的第一行是

这导致错误无法找到从ember quickstart/components/people列表导入的模块@glimmer/component。没有生成错误，但组件的内容不会呈现。我能做些什么

编辑1：在中，提到了余烬辛烷值。这是ember-v的输出：

下面的编辑2是添加glimmer后的my package.json。我可以运行npm安装，但Thread安装提供的引擎节点与此模块不兼容。预期版本10.*||>=12。得了11.13.0分

现在上面描述的问题消失了，取而代之的是解析错误：people-list.js的第5行中出现了意外字符“@”：

---

请确保package.json中存在@glimmer/component:^1.0.0行。然后重新运行npm安装或纱线安装并重新启动ember s。如果您在ember 3.14+中使用了ember new，则应该存在此项，但它似乎可能已丢失。

请确保您的package.json中存在@glimmer/component:^1.0.0行。然后重新运行npm安装或纱线安装并重新启动ember s。如果您在ember 3.14+中使用了ember new，则应该有此选项，但它似乎不存在。

您是否在项目文件夹中运行了ember-v？你能分享你的package.json吗？是的，我在项目文件夹中运行了它。我编辑了我的问题并添加了package.json。您是否在项目文件夹中运行了ember-v？你能分享你的package.json吗？是的，我在项目文件夹中运行了它。我编辑了我的问题并添加了package.json。谢谢！我遇到了同样的问题，在package.jsontanks中包含了模块后，该行确实丢失了。我添加了它并安装了npm。不，还有一个问题，我编辑了我的问题。嗨，皮达。Stack Overflow的常见惯例是，当您遇到其他问题时，接受答案并询问另一个问题。谢谢！我遇到了同样的问题，在package.jsontanks中包含了模块后，该行确实丢失了。我添加了它并安装了npm。不，还有一个问题，我编辑了我的问题。嗨，皮达。在堆栈溢出中，常见的惯例是接受答案，并在遇到其他问题时提出另一个问题。

import Component from '@glimmer/component';

ember-cli: 3.18.0
node: 11.13.0
os: darwin x64

{
  "name": "ember-quickstart",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for ember-quickstart goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test"
  },
  "devDependencies": {
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.3",
    "broccoli-asset-rev": "^2.7.0",
    "ember-ajax": "^5.0.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.1.2",
    "ember-cli-dependency-checker": "^3.1.0",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-htmlbars": "^3.0.0",
    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-data": "~3.9.0",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^3.4.1",
    "ember-resolver": "^5.0.1",
    "ember-source": "~3.9.0",
    "ember-welcome-page": "^3.2.0",
    "eslint-plugin-ember": "^5.2.0",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.0"
  },
  "engines": {
    "node": "10.* || >= 12"
  },
  "dependencies": {
    "ember-cli": "^3.18.0",
    "@glimmer/component": "^1.0.0"
  }
}

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class PeopleListComponent extends Component {
  @action
  showPerson(person) {
    alert(`The person's name is ${person}!`);
  }
}