Troubleshoot problems with UI bundler

This document explains how to troubleshoot the UI bundler process, for when something goes wrong when you are trying to develop the front-end of an application.

Copy link to this section

Cannot get connection to server

When running the UI bundler process you might see a message like:

Can't get connection to server, 401 Unauthorized

This indicates VS Code or the UI bundler process cannot authenticate against your environment. to fix this, you can:

• Clear the cookies from your browser.
• Clear the session token from VS Code.

To clear the session token from VS Code, press CMD + Shift + P, search for C3: Remove auth token, and select that option.

Once you make a change to a file, VS Code will automatically try to authenticate against your environment.

Copy link to this section

NPM install fails

When running the UI bundler process, you might see a message saying that npm install failed or that it cannot find a module.

You can check the NPM log files for more information on what might be wrong. The log files are located at:

~/.vscode/extensions/{c3.ai extension version}/.uicli/ui-log-vsce

Copy link to this section

Clear NPM cache

If the problem persists, you can try deleting the NPM cache and local UI working directory.

In VS Code, stop UI bundler. Then, from a terminal, clear the NPM cache:

npm cache clean --force

And delete the local directory used by UI bundler. You can find this directory at:

~/.vscode/extensions/{c3.ai extension version}/.uicli

Copy link to this section

Changes to files are not being reflected in the application

Start by navigating to the generated React application. You can find the source code of the application at:

~/.vscode/extensions/{c3.ai extension version}/.uicli/ui-workdir-vsce

Open this project in your IDE, and find for the generated code. As an example, if you are making changes to the file MyPackage.MyPage.json, and those changes are not being reflected, open the node_modules/@c3/MyPackage.MyPage.tsx.

If your changes are not reflected in the generated file, it means the UI Bundler repository watcher process probably failed and is not listening for changes to your files.

If that's the case, stop and re-start UI bundler.

Copy link to this section

Disable UI component code generation caching

UI bundler caches code generated UI files to accelerate bundling the front-end portion of your application. Learn more.

If changes are not being reflected or you are having issues when bundling the application, you can disable caching. In the static console for the application you are bundling, run:

UiSdlConfig.setConfigValue('infrastructure.cacheGenFiles', false)

You can also remove all cache entries by running:

UiSdlCachedGeneratedFile.removeAll({}, true)