Ember Quickstart: could not find module `@glimmer/component` when adding JS file to first component

I just started using Ember. I already had some trouble with the Ember Quickstart tutorial which describes that hbs and js files for components should both be put in app/components. The only way it works on my machine is with the js file in app/components, but the hbs file in app/templates/components. That's also what ember generate component people-list did.

Now, there's another problem: The first line in people-list.js is

import Component from '@glimmer/component';

This causes the error Could not find module @glimmer/component imported from ember-quickstart/components/people-list. There is no build error, but the component's content does not render. What can I do about this?

edit 1: In my other question, Ember Octane was mentioned. This is the output of ember -v:

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

edit 2 Below is my package.json after adding glimmer. I could run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".

{
  "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"
  }
}

Now the problem described above is gone, instead I get Parsing error: Unexpected character '@' in line 5 of people-list.js:

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}!`);
  }
}