Skip to content

Commit 1d172a5

Browse files
KelvinTegelaarKelvinTegelaar
committed
Fixes dynamic routes issues.
1 parent b1cf7e2 commit 1d172a5

File tree

6 files changed

+208
-8
lines changed

6 files changed

+208
-8
lines changed

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
dist/
2+
build/
3+
importsMap.jsx
4+
Generate-Import-Map.js

‎Generate-Import-Map.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Using ES Module syntax compatible with Node.js 18 and ensuring cross-platform compatibility
2+
import fs from 'fs/promises'
3+
import path from 'path'
4+
import { fileURLToPath } from 'url'
5+
6+
// Convert __dirname equivalent for ES Modules
7+
const __filename = fileURLToPath(import.meta.url)
8+
const __dirname = path.dirname(__filename)
9+
10+
// Adjust the relative path as necessary to point to your routes.json location
11+
const routesPath = path.join(__dirname, './src/routes.json') // Example path
12+
13+
// Load routes.json with an import assertion for JSON
14+
const routes = await import(`file://${routesPath}`, { assert: { type: 'json' } }).then(
15+
(module) => module.default,
16+
)
17+
18+
let importsMap = "import React from 'react'\n export const importsMap = {\n"
19+
20+
routes.forEach((route) => {
21+
if (route.component) {
22+
// Adjust the import path to be relative to the importsMap.js file location
23+
const importPath = route.component.replace('views', './views')
24+
// Ensure paths are Unix-like for the dynamic import to work cross-platform
25+
const unixImportPath = importPath.split(path.sep).join('/')
26+
importsMap += ` "${route.path}": React.lazy(() => import('${unixImportPath}')), \n`
27+
}
28+
})
29+
30+
importsMap += '}\nexport default importsMap'
31+
32+
// Specify the output file path for the generated imports map
33+
const outputPath = path.join(__dirname, './src/importsMap.jsx')
34+
await fs.writeFile(outputPath, importsMap)
35+
console.log('Import map generated.')

‎Importmap.ps1

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// generate-imports-map.js
2+
const fs = require('fs')
3+
const path = require('path')
4+
const routes = require('./path/to/routes.json')
5+
6+
let importsMap = 'export const importsMap = {\n'
7+
8+
routes.forEach(route => {
9+
if (route.component) {
10+
// Convert the path to a format that's relative to where you'll be importing from
11+
const importPath = route.component.replace('views', './views')
12+
const componentName = path.basename(importPath)
13+
14+
// Create an import statement for the component
15+
importsMap += "${route.path}": React.lazy(() = > import('${importPath}')), \n`;
16+
}
17+
})
18+
19+
importsMap += '};\n'
20+
21+
fs.writeFileSync(path.resolve(__dirname,'./src/importsMap.js'), importsMap)
22+
console.log('Import map generated.')

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"license": "AGPL-3.0",
1515
"author": "CIPP Contributors",
1616
"scripts": {
17+
"prebuild": "node Generate-Import-Map.js",
1718
"build": "echo react-scripts build && vite build",
1819
"changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit",
1920
"lint": "eslint \"src/**/*.js\"",

‎src/App.jsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
1111
import { fas } from '@fortawesome/free-solid-svg-icons'
1212
import routes from 'src/routes'
1313
import { useAuthCheck } from './components/utilities/CippauthCheck'
14+
import importsMap from './importsMap'
1415

1516
library.add(fas)
1617

17-
const dynamicImport = (path) => React.lazy(() => import(`./${path}`))
18+
const dynamicImport = (path) => {
19+
return importsMap[path] || null
20+
}
21+
1822
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
1923
const Page401 = React.lazy(() => import('./views/pages/page401/Page401'))
2024
const Page403 = React.lazy(() => import('./views/pages/page403/Page403'))
@@ -25,12 +29,6 @@ const Login = React.lazy(() => import('./views/pages/login/Login'))
2529
const Logout = React.lazy(() => import('./views/pages/login/Logout'))
2630
//we loop through the routes array, dynamicly create the component by using dynamicImport, add the component to the route array as 'component' key.
2731

28-
routes.forEach((route) => {
29-
if (route.component) {
30-
route['component'] = dynamicImport(route.component)
31-
}
32-
})
33-
3432
const App = () => {
3533
return (
3634
<BrowserRouter>
@@ -56,6 +54,9 @@ const App = () => {
5654
>
5755
{routes.map((route, idx) => {
5856
const allowedRoles = route.allowedRoles
57+
const Routecomponent = dynamicImport(route.path)
58+
console.log('route', route)
59+
console.log('Routecomponent', Routecomponent)
5960
return (
6061
route.component && (
6162
<Route
@@ -70,7 +71,7 @@ const App = () => {
7071
<title>CIPP - {route.name}</title>
7172
</Helmet>
7273
<ErrorBoundary key={route.name}>
73-
<route.component />
74+
<Routecomponent />
7475
</ErrorBoundary>
7576
</Suspense>
7677
</PrivateRoute>

‎src/importsMap.jsx

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from 'react'
2+
export const importsMap = {
3+
"/home": React.lazy(() => import('./views/home/Home')),
4+
"/cipp/logs": React.lazy(() => import('./views/cipp/Logs')),
5+
"/cipp/scheduler": React.lazy(() => import('./views/cipp/Scheduler')),
6+
"/cipp/statistics": React.lazy(() => import('./views/cipp/Statistics')),
7+
"/cipp/404": React.lazy(() => import('./views/pages/page404/Page404')),
8+
"/cipp/403": React.lazy(() => import('./views/pages/page403/Page403')),
9+
"/cipp/500": React.lazy(() => import('./views/pages/page500/Page500')),
10+
"/identity/administration/users/add": React.lazy(() => import('./views/identity/administration/AddUser')),
11+
"/identity/administration/users/addbulk": React.lazy(() => import('./views/identity/administration/AddUserBulk')),
12+
"/identity/administration/users/edit": React.lazy(() => import('./views/identity/administration/EditUser')),
13+
"/identity/administration/users/view": React.lazy(() => import('./views/identity/administration/ViewUser')),
14+
"/identity/administration/users/InviteGuest": React.lazy(() => import('./views/identity/administration/InviteGuest')),
15+
"/identity/administration/ViewBec": React.lazy(() => import('./views/identity/administration/ViewBEC')),
16+
"/identity/administration/users": React.lazy(() => import('./views/identity/administration/Users')),
17+
"/identity/administration/devices": React.lazy(() => import('./views/identity/administration/Devices')),
18+
"/identity/administration/groups/add": React.lazy(() => import('./views/identity/administration/AddGroup')),
19+
"/identity/administration/group-templates": React.lazy(() => import('./views/identity/administration/GroupTemplates')),
20+
"/identity/administration/group-add-template": React.lazy(() => import('./views/identity/administration/AddGroupTemplate')),
21+
"/identity/administration/deploy-group-template": React.lazy(() => import('./views/identity/administration/DeployGroupTemplate')),
22+
"/identity/administration/groups/edit": React.lazy(() => import('./views/identity/administration/EditGroup')),
23+
"/identity/administration/groups/view": React.lazy(() => import('./views/identity/administration/ViewGroup')),
24+
"/identity/administration/groups": React.lazy(() => import('./views/identity/administration/Groups')),
25+
"/identity/administration/roles": React.lazy(() => import('./views/identity/administration/Roles')),
26+
"/identity/administration/deleted-items": React.lazy(() => import('./views/identity/administration/Deleted')),
27+
"/teams-share/teams/business-voice": React.lazy(() => import('./views/teams-share/teams/BusinessVoice')),
28+
"/identity/administration/offboarding-wizard": React.lazy(() => import('./views/identity/administration/OffboardingWizard')),
29+
"/endpoint/reports/devices": React.lazy(() => import('./views/endpoint/intune/Devices')),
30+
"/identity/reports/mfa-report": React.lazy(() => import('./views/identity/reports/MFAReport')),
31+
"/identity/reports/inactive-users-report": React.lazy(() => import('./views/identity/reports/InactiveUsers')),
32+
"/identity/reports/Signin-report": React.lazy(() => import('./views/identity/reports/SignIns')),
33+
"/identity/reports/azure-ad-connect-report": React.lazy(() => import('./views/identity/reports/AzureADConnectReport')),
34+
"/tenant/administration/tenants": React.lazy(() => import('./views/tenant/administration/Tenants')),
35+
"/tenant/administration/tenants/edit": React.lazy(() => import('./views/tenant/administration/EditTenant')),
36+
"/tenant/administration/domains": React.lazy(() => import('./views/tenant/administration/Domains')),
37+
"/tenant/administration/alertswizard": React.lazy(() => import('./views/tenant/administration/AlertWizard')),
38+
"/tenant/administration/alertrules": React.lazy(() => import('./views/tenant/administration/AlertRules')),
39+
"/tenant/administration/alertsqueue": React.lazy(() => import('./views/tenant/administration/ListAlertsQueue')),
40+
"/tenant/administration/graph-explorer": React.lazy(() => import('./views/tenant/administration/GraphExplorer')),
41+
"/tenant/administration/service-health": React.lazy(() => import('./views/tenant/administration/ServiceHealth')),
42+
"/tenant/administration/enterprise-apps": React.lazy(() => import('./views/tenant/administration/ListEnterpriseApps')),
43+
"/tenant/administration/app-consent-requests": React.lazy(() => import('./views/tenant/administration/ListAppConsentRequests')),
44+
"/tenant/conditional/list-policies": React.lazy(() => import('./views/tenant/conditional/ConditionalAccess')),
45+
"/tenant/conditional/deploy-vacation": React.lazy(() => import('./views/tenant/conditional/DeployVacation')),
46+
"/tenant/conditional/list-named-locations": React.lazy(() => import('./views/tenant/conditional/NamedLocations')),
47+
"/tenant/conditional/deploy": React.lazy(() => import('./views/tenant/conditional/DeployCA')),
48+
"/tenant/conditional/deploy-named-location": React.lazy(() => import('./views/tenant/conditional/DeployNamedLocation')),
49+
"/tenant/conditional/list-template": React.lazy(() => import('./views/tenant/conditional/ListCATemplates')),
50+
"/tenant/conditional/add-template": React.lazy(() => import('./views/tenant/conditional/AddCATemplate')),
51+
"/tenant/administration/list-licenses": React.lazy(() => import('./views/tenant/administration/ListLicences')),
52+
"/tenant/administration/application-consent": React.lazy(() => import('./views/tenant/administration/ListOauthApps')),
53+
"/tenant/standards/list-applied-standards": React.lazy(() => import('./views/tenant/standards/ListAppliedStandards')),
54+
"/tenant/standards/bpa-report": React.lazy(() => import('./views/tenant/standards/BestPracticeAnalyser')),
55+
"/tenant/standards/domains-analyser": React.lazy(() => import('./views/tenant/standards/DomainsAnalyser')),
56+
"/tenant/standards/individual-domains": React.lazy(() => import('./views/tenant/standards/IndividualDomain')),
57+
"/tenant/administration/tenantlookup": React.lazy(() => import('./views/tenant/administration/TenantLookup')),
58+
"/tenant/tools/geoiplookup": React.lazy(() => import('./views/tenant/administration/GeoIPLookup')),
59+
"/tenant/tools/bpa-report-builder": React.lazy(() => import('./views/tenant/standards/BPAReportBuilder')),
60+
"/tenant/standards/alert-list": React.lazy(() => import('./views/security/incidents/ListAlerts')),
61+
"/endpoint/applications/list": React.lazy(() => import('./views/endpoint/applications/ApplicationsList')),
62+
"/endpoint/applications/queue": React.lazy(() => import('./views/endpoint/applications/ListApplicationQueue')),
63+
"/endpoint/applications/add-choco-app": React.lazy(() => import('./views/endpoint/applications/ApplicationsAddChocoApp')),
64+
"/endpoint/applications/add-winget-app": React.lazy(() => import('./views/endpoint/applications/ApplicationsAddWinGet')),
65+
"/endpoint/applications/add-office-app": React.lazy(() => import('./views/endpoint/applications/ApplicationsAddOffice')),
66+
"/endpoint/applications/add-rmm-app": React.lazy(() => import('./views/endpoint/applications/ApplicationsAddRMM')),
67+
"/endpoint/autopilot/add-device": React.lazy(() => import('./views/endpoint/autopilot/AutopilotAddDevice')),
68+
"/endpoint/autopilot/add-profile": React.lazy(() => import('./views/endpoint/autopilot/AutopilotAddProfile')),
69+
"/endpoint/autopilot/add-status-page": React.lazy(() => import('./views/endpoint/autopilot/AutopilotAddStatusPage')),
70+
"/endpoint/autopilot/list-devices": React.lazy(() => import('./views/endpoint/autopilot/AutopilotListDevices')),
71+
"/endpoint/autopilot/list-profiles": React.lazy(() => import('./views/endpoint/autopilot/AutopilotListProfiles')),
72+
"/endpoint/autopilot/list-status-pages": React.lazy(() => import('./views/endpoint/autopilot/AutopilotListStatusPages')),
73+
"/endpoint/MEM/list-policies": React.lazy(() => import('./views/endpoint/intune/MEMListPolicies')),
74+
"/endpoint/MEM/list-compliance-policies": React.lazy(() => import('./views/endpoint/intune/MEMListCompliance')),
75+
"/endpoint/MEM/list-appprotection-policies": React.lazy(() => import('./views/endpoint/intune/MEMListAppProtection')),
76+
"/endpoint/MEM/edit-policy": React.lazy(() => import('./views/endpoint/intune/MEMEditPolicy')),
77+
"/endpoint/MEM/ca-policies": React.lazy(() => import('./views/endpoint/intune/MEMCAPolicies')),
78+
"/endpoint/MEM/add-policy": React.lazy(() => import('./views/endpoint/intune/MEMAddPolicy')),
79+
"/endpoint/MEM/add-policy-template": React.lazy(() => import('./views/endpoint/intune/MEMAddPolicyTemplate')),
80+
"/endpoint/MEM/list-templates": React.lazy(() => import('./views/endpoint/intune/MEMListPolicyTemplates')),
81+
"/security/defender/deployment": React.lazy(() => import('./views/security/defender/DeployDefender')),
82+
"/security/defender/list-defender": React.lazy(() => import('./views/security/defender/ListDefender')),
83+
"/security/defender/list-defender-tvm": React.lazy(() => import('./views/security/defender/ListVuln')),
84+
"/teams-share/onedrive/list": React.lazy(() => import('./views/teams-share/onedrive/OneDriveList')),
85+
"/teams-share/sharepoint/list-sharepoint": React.lazy(() => import('./views/teams-share/sharepoint/SharepointList')),
86+
"/teams-share/teams/list-team": React.lazy(() => import('./views/teams-share/teams/TeamsListTeam')),
87+
"/teams-share/teams/view-team-settings": React.lazy(() => import('./views/teams-share/teams/ViewTeamSettings')),
88+
"/teams-share/teams/add-team": React.lazy(() => import('./views/teams-share/teams/TeamsAddTeam')),
89+
"/teams-share/teams/teams-activity": React.lazy(() => import('./views/teams-share/teams/TeamsActivity')),
90+
"/email/administration/contacts": React.lazy(() => import('./views/email-exchange/administration/ContactsList')),
91+
"/email/connectors/list-connectors": React.lazy(() => import('./views/email-exchange/connectors/ConnectorList')),
92+
"/email/connectors/deploy-connector": React.lazy(() => import('./views/email-exchange/connectors/DeployConnector')),
93+
"/email/connectors/add-connector-templates": React.lazy(() => import('./views/email-exchange/connectors/AddConnectorTemplate')),
94+
"/email/connectors/list-connector-templates": React.lazy(() => import('./views/email-exchange/connectors/ListConnectorTemplates')),
95+
"/email/transport/list-rules": React.lazy(() => import('./views/email-exchange/transport/TransportRules')),
96+
"/email/transport/deploy-rules": React.lazy(() => import('./views/email-exchange/transport/DeployTransport')),
97+
"/email/transport/list-templates": React.lazy(() => import('./views/email-exchange/transport/ListTransportTemplates')),
98+
"/email/transport/add-template": React.lazy(() => import('./views/email-exchange/transport/AddTransportTemplate')),
99+
"/email/spamfilter/list-spamfilter": React.lazy(() => import('./views/email-exchange/spamfilter/Spamfilter')),
100+
"/email/spamfilter/deploy": React.lazy(() => import('./views/email-exchange/spamfilter/DeploySpamfilter')),
101+
"/email/spamfilter/list-templates": React.lazy(() => import('./views/email-exchange/spamfilter/ListSpamfilterTemplates')),
102+
"/email/tools/mailbox-restore-wizard": React.lazy(() => import('./views/email-exchange/tools/MailboxRestoreWizard')),
103+
"/email/tools/mailbox-restores": React.lazy(() => import('./views/email-exchange/tools/MailboxRestores')),
104+
"/email/tools/mail-test": React.lazy(() => import('./views/email-exchange/tools/MailTest')),
105+
"/email/spamfilter/add-template": React.lazy(() => import('./views/email-exchange/spamfilter/AddSpamfilterTemplate')),
106+
"/email/administration/edit-mailbox-permissions": React.lazy(() => import('./views/email-exchange/administration/EditMailboxPermissions')),
107+
"/email/administration/add-shared-mailbox": React.lazy(() => import('./views/email-exchange/administration/AddSharedMailbox')),
108+
"/email/administration/add-contact": React.lazy(() => import('./views/email-exchange/administration/AddContact')),
109+
"/email/administration/edit-calendar-permissions": React.lazy(() => import('./views/email-exchange/administration/EditCalendarPermissions')),
110+
"/email/administration/view-mobile-devices": React.lazy(() => import('./views/email-exchange/administration/ViewMobileDevices')),
111+
"/email/administration/edit-contact": React.lazy(() => import('./views/email-exchange/administration/EditContact')),
112+
"/email/administration/mailboxes": React.lazy(() => import('./views/email-exchange/administration/MailboxesList')),
113+
"/email/administration/mailbox-rules": React.lazy(() => import('./views/email-exchange/administration/MailboxRuleList')),
114+
"/email/administration/Quarantine": React.lazy(() => import('./views/email-exchange/administration/QuarantineList')),
115+
"/email/reports/mailbox-statistics": React.lazy(() => import('./views/email-exchange/reports/MailboxStatisticsList')),
116+
"/email/reports/SharedMailboxEnabledAccount": React.lazy(() => import('./views/email-exchange/reports/SharedMailboxEnabledAccount')),
117+
"/email/reports/mailbox-cas-settings": React.lazy(() => import('./views/email-exchange/reports/MailboxClientAccessSettingsList')),
118+
"/email/reports/message-trace": React.lazy(() => import('./views/email-exchange/reports/MessageTrace')),
119+
"/cipp/user-settings": React.lazy(() => import('./views/cipp/UserSettings')),
120+
"/email/reports/phishing-policies": React.lazy(() => import('./views/email-exchange/reports/PhishingPoliciesList')),
121+
"/security/incidents/list-alerts": React.lazy(() => import('./views/security/incidents/ListAlerts')),
122+
"/security/incidents/list-incidents": React.lazy(() => import('./views/security/incidents/ListIncidents')),
123+
"/security/reports/list-device-compliance": React.lazy(() => import('./views/security/reports/ListDeviceComplianceReport')),
124+
"/license": React.lazy(() => import('./views/pages/license/License')),
125+
"/cipp/settings": React.lazy(() => import('./views/cipp/app-settings/CIPPSettings')),
126+
"/cipp/setup": React.lazy(() => import('./views/cipp/Setup')),
127+
"/tenant/administration/gdap": React.lazy(() => import('./views/tenant/administration/GDAPWizard')),
128+
"/tenant/administration/gdap-invite": React.lazy(() => import('./views/tenant/administration/GDAPInviteWizard')),
129+
"/tenant/administration/gdap-role-wizard": React.lazy(() => import('./views/tenant/administration/GDAPRoleWizard')),
130+
"/tenant/administration/gdap-roles": React.lazy(() => import('./views/tenant/administration/ListGDAPRoles')),
131+
"/tenant/administration/gdap-relationships": React.lazy(() => import('././views/tenant/administration/ListGDAPRelationships')),
132+
"/tenant/administration/appapproval": React.lazy(() => import('./views/cipp/AppApproval')),
133+
"/tenant/administration/gdap-status": React.lazy(() => import('./views/tenant/administration/ListGDAPQueue')),
134+
"/tenant/standards/list-standards": React.lazy(() => import('./views/tenant/standards/ListStandards')),
135+
"/tenant/administration/tenant-offboarding-wizard": React.lazy(() => import('./views/tenant/administration/TenantOffboardingWizard')),
136+
"/tenant/administration/tenant-onboarding-wizard": React.lazy(() => import('./views/tenant/administration/TenantOnboardingWizard')),
137+
}
138+
export default importsMap

0 commit comments

Comments
 (0)