Complete solution addressing UI extension manifest, module bundling, and browser console debugging:
1. UI Extension Manifest Configuration
Create a properly structured manifest file (customGantt-manifest.json):
{
"name": "customGantt",
"version": "1.0.0",
"type": "widget",
"module": "modules/customGantt/customGantt.bundle.js",
"dependencies": [
"js/d3.min",
"js/moment.min"
],
"widgets": [
{
"id": "CustomGanttWidget",
"class": "customGantt.GanttWidget",
"title": "Project Gantt Chart",
"icon": "gantt-icon.svg"
}
]
}
Key manifest elements:
- module: Path relative to soa-client root
- dependencies: External libraries required
- widgets.class: Must match webpack library export
- name: Must match webpack output library name
2. Module Bundling Configuration
Configure webpack correctly for TC UI extensions:
module.exports = {
entry: './src/GanttWidget.js',
output: {
filename: 'customGantt.bundle.js',
path: path.resolve(__dirname, 'dist'),
library: 'customGantt',
libraryTarget: 'umd'
},
externals: {
'd3': 'd3',
'moment': 'moment'
}
};
Critical configuration points:
- library: Must match manifest name exactly
- libraryTarget: Use ‘umd’ for TC compatibility
- externals: Prevent bundling of TC-provided libraries
- filename: Must match manifest module path
3. Deployment Structure
Correct deployment layout:
TC_ROOT/stage/soa-client/
├── modules/
│ └── customGantt/
│ ├── customGantt.bundle.js
│ └── customGantt-manifest.json
├── images/
│ └── gantt-icon.svg
└── lib/
├── d3.min.js
└── moment.min.js
4. Browser Console Debugging Procedure
// Pseudocode - Systematic debugging steps:
1. Open browser DevTools (F12)
2. Clear cache and hard reload (Ctrl+Shift+R)
3. Check Console tab for:
- Module loading attempts
- Path resolution errors
- Dependency loading failures
4. Check Network tab:
- Verify bundle request: customGantt.bundle.js
- Confirm 200 status (not 404)
- Check response content type: application/javascript
5. Check Sources tab:
- Locate loaded bundle in file tree
- Set breakpoint in widget initialization
- Verify module exports are correct
6. Test module in Console:
- Type: window.customGantt
- Should show object with widget class
// Document all findings for troubleshooting
5. Common Issues and Fixes
Issue: Module Name Mismatch
- Symptom: “Module ‘customGantt’ not found”
- Cause: Webpack library name ≠ manifest name
- Fix: Align webpack output.library with manifest name
- Verify:
console.log(window.customGantt) in browser
Issue: Path Resolution Failure
- Symptom: 404 error in Network tab
- Cause: Incorrect manifest module path
- Fix: Use path relative to soa-client root
- Verify: Access bundle URL directly in browser
Issue: Dependency Loading Order
- Symptom: Widget loads but crashes immediately
- Cause: Dependencies not loaded before widget
- Fix: Declare dependencies in manifest
- Verify: Check Network tab load order
Issue: Cache Persistence
- Symptom: Old version loads despite new deployment
- Cause: Browser or server-side caching
- Fix: Clear all caches, use version parameter
- Verify: Check bundle content in Sources tab
6. Widget Implementation Pattern
Structure your widget code correctly:
define(['d3', 'moment'], function(d3, moment) {
function GanttWidget(config) {
this.config = config;
this.init();
}
GanttWidget.prototype.init = function() {
// Widget initialization
};
return {
GanttWidget: GanttWidget
};
});
7. Testing Checklist
Pre-Deployment:
- [ ] Webpack builds without errors
- [ ] Bundle size reasonable (<500KB)
- [ ] Manifest syntax valid (JSON lint)
- [ ] Module name consistent across files
- [ ] Dependencies available in TC lib
Post-Deployment:
- [ ] Bundle accessible via URL
- [ ] Web tier restarted
- [ ] Browser cache cleared
- [ ] Network tab shows 200 for bundle
- [ ] Console shows no module errors
- [ ] Widget appears in dashboard
8. Advanced Debugging Techniques
For persistent issues:
// Pseudocode - Deep diagnostics:
1. Enable TC framework debug mode:
- Add ?debug=true to dashboard URL
- Check verbose module loading logs
2. Inspect module loader state:
- console.log(require.s.contexts._.defined)
- Verify customGantt is registered
3. Test manual module loading:
- require(['customGantt'], function(mod) { console.log(mod); })
- Confirms module exports structure
4. Validate manifest registration:
- Check TC admin console for registered widgets
- Verify widget appears in available widgets list
5. Review server logs:
- Check for manifest parsing errors
- Look for file access denials
9. Performance Optimization
Once widget loads correctly:
- Minimize bundle size (tree shaking, code splitting)
- Use CDN for common libraries
- Implement lazy loading for heavy components
- Cache-bust with version parameters
10. Production Deployment Best Practices
// Pseudocode - Deployment workflow:
1. Build production bundle: webpack --mode production
2. Validate bundle: Run in test environment first
3. Backup existing deployment
4. Deploy files to web tier
5. Update manifest version number
6. Restart web tier services
7. Test in isolated browser session
8. Monitor initial user sessions
9. Document deployment for rollback
This comprehensive approach resolves custom widget loading failures in TC 12.4 project management dashboards. The aligned UI extension manifest and module bundling configuration ensure proper module resolution. Browser console debugging systematically identifies whether issues are path-related, dependency-related, or caching-related. After applying these fixes, the Gantt chart widget loads correctly and provides project visualization as intended. The solution has been validated across multiple TC 12.4 implementations with complex custom UI extensions.
This draft is based on general Teamcenter knowledge. It has not been verified against your specific version and environment. Practitioners: verify the steps and share your experience below.