Hub v1 FAQ and Troubleshooting

Updating#

How do I update my Hub v1 app?#

Follow the upgrading guide

I can't install any version of hub.common.tooling after 1.0.2#

Starting from 1.0.3, the hub.common.tooling uses hub-dev-server to serve the shell. To be able to install it, you will need to create the .npmrc file in the repository root

After upgrading the stack, the command 'gulp' is not working anymore#

Gulp command was deprecated in favor of the npm start script.

After upgrading the stack, npm start outputs Task never defined: Default#

Ensure your gulpfile.js is as follows.

gulpfile.js
require("@iqmetrix/hub.common.tooling/gulp/gulpfile");

After upgrading the stack, I have a missing UI component(s)#

Because of how pug handles indented nested conditionals, some variables can go undetected, so if you have a missing UI component you should try removing one of the ../ from your conditionals.

For exmaple, this:

//- usage in template
|{{#if ../../HasText}}

should become:

//- usage in template
|{{#if ../HasText}}

See exmaple in this PR for Product Mareketing app

Common errors#

I am using npm start but I am getting the error Unexpected token ...#

You are probably using node 6. Check the version using node -v and make sure you are using node on versions 8.11+ || 10+ || 12+ || 14+.

I am getting the error that says: authHome is not a function#

Make sure that you don't have the App.addInitializer function in your app.es6.js anymore as it has been deprecated. You can safely delete this function and the associated imports.

I can't access my app on http://localhost:9000 or a link on http://localhost:9000/#myLink#

Now that the shell has been removed, hub.common.tooling uses hub-dev-server to serve your app. You will need to add the /#dev/ to the url to access the starting page of the app like http://localhost:9000/#dev or your internal link like http://localhost:9000/#dev/yourLink

npm ERR! This request requires auth credentials. Run 'npm login' and repeat the request.#

Check your global .npmrc file to make sure that you have the login information for Azure Artifacts as described in the Configuring Environments guide

I have some .js and some .es6.js files on my app#

Normally .js files are AMD modules written in ES5 syntax while .es6.js are ES modules written in using ES6+ syntax. This is fine but you should consider updating your code

I have NaN displaying in my daterangepicker#

We have updated to daterangepicker@3, this major update has slightly changed the API. Specifically, you may find that you use the format option. This has now moved into the locale option. eg. this.ui.datePicker.daterangepicker({ local: { format: "MM/DD/YYYY" }});

Running the app#

Uncaught TypeError: 'variable.method' is not a function or 'property' don't exist on 'variable'#

This may be because Hub v1 now uses Babel 7 and ES6 modules (file extension .es6.js). The ES6 modules are exported as an object where them can be a default or named exports. If you have AMD modules in you Hub app (without the es6 in the extension and using define([])) you will need to update it to use the new exports in your Hub app. Here you have 2 options:

  • Preferred: Convert your AMD modules to ES modules. The @buxlabs/amd-to-es6 can give you a hand in doing this job.
  • Or, you will need to check for a default export. For example, when using Endpoints you will need to use Endpoints = Endpoints.default || Endpoints.

I am getting indent error from my jade/pug files#

Now we are using the new version of Pug and Handlebars. Some indentation errors were ignored before but now they need to be fixed. If you don't fix the error, the template will not be built. You can check the line and details of what is expected in the template by looking into the console.

Getting the error 'regeneratorRuntime is not defined'#

Babel polyfill was deprecated in favor of @babel/present-env in version 7. You will normally get this error when trying to use "async". Unfortunately, to fix it we need to use @babel/runtime package that is not compatible with RequireJS. In other words, you cannot use "async" functions.

I am getting the error: gulp isn't recognized as a command#

Delete your package-lock.json and run the npm install again.

I am getting perfect-scrollbar cannot be found or similiar error when running npm install#

The developer of perfect-scrollbar deleted their account. This pulled the package from bower and Github. This package is used in several Hub v1 apps but more importantly it is used in HubCommon. View the announcement about his issue and how to fix it.

Building and Deploying#

How to check if my app is ready for production and if the build works?#

Make sure you have the "prod" (hub-scripts start --prod) script in your package.json and run "npm run prod". You will see the same thing that will be deployed on INT

I'm typing the right URL but my app is only showing an empty page#

This happens because the URLs in Backbone are case sensitive. If you are using HubCommon 5.x.x, you will get the fix to have URLs as case insensitive from version 5.7.4

After the stack upgrade, my build is failling on TeamCity#

Check if the build agents are Default_V2 and Default_V2_Canary. If your build agent is OldNode, you need to talk with #teamcity team to have your build agents updated Check your build configuration/steps on TeamCity to make sure you have update the step 2 to use GULP 4. Moreover, consider moving your build to Azure Pipelines.

After moving to Azure Pipelines, my build is failing due to KeyVault access error#

Make sure you have your Azure Key Vault Access Policy configured under your Azure DevOps Project as it is needed only for V1 apps.

After moving to Azure Pipelines, I can build but the deploys are failing#

Make sure you have your Service Connections configured under your Azure DevOps Project.

After moving to Azure Pipelines, my build task is failing due to missing files#

Error: ENOENT: no such file or directory

The default Virtual Machine for the pipeline is ubuntu, and the file/folder structure is case sensitive (while Windows is case insensitive). Make sure that the case of the import matches your file structure. Incorrect casing can cause build errors.

Another place to verify (and it is the most common cause of failure when running the Sass build task) is due to the wrong configuration on your .bowerrc file. Check if in this file you have the directory configuration as "devTemp/libs" and not "devtemp/libs". The T from temp should be uppercase.

.bowerrc
{
"directory": "devTemp/libs"
}

I have a custom script/test using PowerShell and/or C#, and it will not work with Ubuntu#

The default virtual machine for Hub pipelines is Ubuntu. If you need to run your pipeline on Windows for the custom scripts, you will need to update your azure-pipelines.yml file in your repository root, passing custom pool parameters to use windows-latest instead of Ubuntu.

azure-pipelines.yml
... # Remaning content of yml file
parameters: # Optional definition (used mostly for Hub v1 apps)
build:
hubVersion: 1 # You can 1 for Hub v1 apps and 3 for React apps. When not defined, it will assume 3 as default
pool:
vmImage: 'windows-latest'

Do we have any recommended or suggested tools for e2e testing sites as part of a CI pipeline?#

The recommendation is to use Cypress. Please, check the E2E testing guide.

Old v1 stack (HubCommon 4 and Hub.Common.Tooling 1)#

Gulp cannot pass through of the Starting 'eslint' step#

It could happen if you use the VS code and have an eslint extension installed. This extension can override the default configurations that are imported from HubCommon. To solve the problem you just need to execute: npm install --save eslint-config-defaults

Gulp cannot pass through of the Starting 'sass' step or it will throw an error on Saas module#

It could happen if you use NVM and have ran the gulp command in a different version before and because of that, Node had built a different Saas module and you will need to rebuild it. To do that, you need to execute: npm rebuild node-sass

Gulp cannot pass trough of the Starting 'build-ts-es6' step#

Normmaly this problem is because you are using the wrong version of Node/NPM. To make sure wich version you are, run node -v. Your version should be 8.11.4.

Gulp cannot pass trough of the Starting 'serve' or Starting 'watch' steps or can even trow an error telling that it could start the server#

This problem will occur if you have another application using the ports 9000 and 3000. To see what is running right now, you can execute the following command and then, close the application that is using the port that you need.

netstat -aon | find /i ":9000"
netstat -aon | find /i ":3000"

When building the app on TeamCity or executing gulp buildAndRequirejs the system trow an error telling that ...\@iqmetrix\detect-inactivity.js is not found. The error can also be require.js:166 Uncaught Error: Script error for: detect-inactivity#

This is caused by the HubCommon session timeout module. To be able to build the app successfully, you will need to update Hub.Common.Tooling to ^1.0.2.

"Hub.Common.Tooling": "git+ssh://git@github.com/iQmetrix/hub.common.tooling.git#1.0.2"

After updating to tooling 1.0.2+, I'm seeing errors when running npm install#

Starting from 1.0.3, the hub.common.tooling uses hub-dev-server to serve the shell. To be able to install it, you will need to create the .npmrc file in the repository root

Trying to load applications.json causes errors on my app#

The applications.json is referenced in some older Hub v1 apps. This file is no longer shipped with HubCommon and as such cannot be imported for use. You should replace its usage with hard coded values you can find in the latest version of applications.json.

Last updated on by Garrett Smith