How to fix "Cannot find module" error and "Error: ReferenceError: Element is not defined" in protractor?

Question

I have created a test project using page object model. When I run, it creates "Cannot find module" error. I have tried several answers but didn't work.
Here is my code

Config.js

exports.config = 
{
seleniumAddress: 'http://localhost:4444/wd/hub',
//specs: ['spec.js']
specs: ['./testSpec/**/*.js'],
jasmineNodeOpts: {
    defaultTimeoutInterval: 12000
},
onPrepare: function () {
    browser.manage().window().maximize();
    browser.manage().timeouts().implicitlyWait(5000);
}
};            

login.po.js

var loginPageLocator = function()
{
var userName = Element(by.model('vm.username'));
var password = Element(by.model('vm.password'));
var signInButtonText = Element(by.buttonText('Sign in'));

this.get = function()
{
    browser.get('http://20.150.10.160/login');

};

this.typeUserName = function(userName)
{
    this.userName.sendKeys(userName);

};

this.typePassword = function(password)
{
    this.password.sendKeys(password);

};

this.clickSignIn = function()
{
    this.signInButtonText.click();

};

};
module.exports = new loginPageLocator();      

LoginTest.js

var logins = require('./../pageObjects/login.po.js');

describe('login to the system',function()
{
it('login as a dealer',function()
{
    var loginPage = new logins();
    loginPage.typeUserName('test');
    loginPage.typePassword('222');
    loginPage.clickSignIn();

});

});        

Here is the folder structure

Package.json

Answer 1

In your LoginTest.js , you have given incorrect reference of page object. change it to:

var logins = require('../../pageObjects/login.po.js');

and then you do not need to create a page object, instead you should directly use the object that you have created earlier like below

logins.typeUserName('test');

update your conf.js file, a sample is below:

    exports.config = {
        directConnect: true,
        capabilities: {
            'browserName': 'chrome'
        },
        framework: 'jasmine',
        baseUrl: "http://url.com",
        specs: ['./*_specs.js'],

        onPrepare: function() {
            browser.driver.manage().window().maximize();
            //create a global variable like below
global.variableName = "hello";
        }
}

Answer 2

Check this, briefly explained here, and you can fix it https://youtu.be/idJHHxA02l8

Answer 3

My issue got resolved when I corrected the module name to match exactly with the names of folders and files. It is case sensitive in Linux systems but not in Windows