Title:
TypeError: Cannot read ‘register’ of undefined
Description:
I’m developing a React application (kpiApp) using a specific framework. When I try to register my application, I encounter the following error in the browser console:
Uncaught TypeError: Cannot read properties of undefined (reading 'register') at (index):31:14 at Object.execCb (require.js:1696:33) at Module.check (require.js:883:51) at Module.<anonymous> (require.js:1139:34) at require.js:134:23 at require.js:1189:21 at each (require.js:59:31) at Module.emit (require.js:1188:17) at Module.check (require.js:938:30) at Module.<anonymous> (require.js:1139:34)
What I Have Tried:
Verified that applicationManager and other applications (connectApp, configurationApp, kpiApp) are correctly imported and initialized.
Added console logs before calling register to check if modules are loaded correctly.
Ensured require.js is correctly configured to load my modules.
Checked the script tags in index.html to ensure the required scripts are loaded in the correct order.
Code and Configuration:
pluginKpi.tsx:
import React, { useState } from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import applicationManager from '../../../framework/src/services/applicationManager';
import LineChart from './components/linechart';
import KpiPage from './components/kpipage';
import Source from './components/source';
const kpiicon = require('./components/assets/kpiicon.svg');
const App: React.FC<RouteComponentProps> = () => {
const [selectedSource, setSelectedSource] = useState<string | null>(null);
const [selectedKpi, setSelectedKpi] = useState<string | null>(null);
return (
<>
<Source setSelectedSource={setSelectedSource} selectedSource={selectedSource} />
<KpiPage selectedSource={selectedSource || ''} selectedKpi={selectedKpi} setSelectedKpi={setSelectedKpi} />
<LineChart selectedSource={selectedSource} selectedKpi={selectedKpi} selectedTimeRange={'selectedTimeRange'} />
</>
);
};
const kpiApp = withRouter(App);
applicationManager.registerApplication({
name: 'kpiApp',
icon: kpiicon,
rootComponent: kpiApp,
menuEntry: 'kpiApp',
});
export default kpiApp;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>kpi App</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./require.js"></script>
<script type="text/javascript" src="./config.js"></script>
<script>
require(["app", "connectApp", "maintenanceApp", "configurationApp", "kpiApp"], function (app, connectApp, maintenanceApp, configurationApp, kpiApp) {
console.log('connectApp:', connectApp);
console.log('configurationApp:', configurationApp);
console.log('kpiApp:', kpiApp);
connectApp.register();
configurationApp.register();
kpiApp.register();
app("./app.tsx").configureApplication({ authentication: "basic", enablePolicy: false });
app("./app.tsx").runApplication();
});
</script>
</body>
</html>
Documentation or References:
I followed the documentation for creating and configuring a new application in the framework, making sure to adjust the packages.json, webpack.config.js, and index.html files as needed.
