Uncaught ReferenceError: Controller is not defined ember js

Question

trying to create a web app with ember which gets login info and route to another page.. it gets the login info and whole routing its showing the error Uncaught ReferenceError: Controller is not defined

my login controller code which gets the login info and route it to the roomselect route

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
//import EmberResolver from 'ember-resolver';
import Ember from 'ember';
import $ from 'jquery';

export default class LoginsController extends Controller {
  @tracked result = 0;
  @service router;
  //canLogin:true;
  @action
  get() {
    var that = this;

    var uname = document.getElementById('uname').value;
    var mobile = document.getElementById('mobile').value;
    console.log('name ->' + uname);
    console.log('mobile ->' + mobile);
    $.ajax({
      url: 'http://localhost:8080/hotelres/AuthenticationServlet',
      method: 'GET',
      data: { uname: uname, mobile: mobile },
      success: function (response) {
        that.result = response;
        console.log('response-> ' + response);
        if (that.result == 1) {
          alert('sucess');
          that.transitionToRoute('roomselect');//----> routing
          console.log(that.result);
        } else {
          alert('Login failed');
        }
      },
      error: function (xhr, status, error) {
        var errorMessage = xhr.status + ':' + xhr.statusText;
        alert('error' + errorMessage);
      },
    });
  }
}

my roomselect controller route which will receive data from a servlet and display controller is not deffined

import { use, resource } from 'ember-resources';
import { tracked } from '@glimmer/tracking';

class RequestState {
  @tracked value;
  @tracked error;

  get isPending() {
    return !this.error && !this.value;
  }
}

export default class RoomselectController extends Controller {
    @service router;

    @use request = resource(({ on }) => {
      const mobile = '123123123';
      const state = new RequestState();
    
      $.ajax({
        url: 'My',
        method: 'GET',
        dataType: 'json',
        data: { mobile },
        success: (response) => state.value = response ,
        error: (xhr, status, error) => state.error = `${status}: ${xhr.statusText}`,
      });

      return state;
    });

    get result() {
      return this.request.value || [];
    }

}

room controller .hbs code

{{#if this.request.isPending}}
  loading data...
{{/if}}

<table border ="1">
  <thead>
    <tr>
      <th>Capacity</th>
      <th>Price</th>
      <th>Room Type</th>
      <th>Room No</th>
    </tr>
  </thead>
  <tbody>
   
    {{#each this.result as |row|}}    
      <tr>
        {{#each-in row as |key value|}}
          {{value}}
        {{/each-in}}
      </tr>
    {{/each}}
  </tbody>
</table>

router.js file

import EmberRouter from '@ember/routing/router';
import config from 'embu/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('logins', function () {
    this.route('testt');
  });
  this.route('register');
  this.route('succcess');
  this.route('error');
  this.route('roomselect');
});

Answer 1

it seems i havent imported the controller module in the room select controller js file adding import Controller from '@ember/controller'; solved it