Hi there!
Situation:
I am in the process of developing an adapter. I terms of a UI I began with no extra tab for the adapter. Now I want to create a tab and want to realize it with React. Therefore I created a fresh adapter with the help of adapter-creator
with all relevant options set for a React tab. When I launch a dev-server
instance for this newly created adapter everything is fine.
So I began to adapt all the neccessary settings that I could find from all the different files from the newly created adapter to my adapter in development.
Problem:
The adapter in development does not render the react page but does render something different. For a better view here are two comparisons as a picture:
Source: Here you see what effectively is deployed within a dev-server instance. On the left hand side for the adapter in development and on the right the newly created adapter.
![f478dce0-35f9-4250-bd00-b6e8e6f90d2e-grafik.png](/assets/uploads/files/1708761821038-f478dce0-35f9-4250-bd00-b6e8e6f90d2e-grafik.png)
Runtime-Markup: Here you can see, what effectively gets rendered. On the left hand side for the adapter in development and on the right the newly created adapter.
![2878bc71-c114-43a4-880a-f7795cabfc8f-grafik.png](/assets/uploads/files/1708761980972-2878bc71-c114-43a4-880a-f7795cabfc8f-grafik.png)
From my understanding something is going on during the compile step that breaks things. Maybe somewhere there it is not clear to the build chain that a React tab is the goal and instead some boilerplate for... maybe Materialized tabs or so... is pulled?
Is somebody out there that has a clue, what I need to check?
Maybe a few settings that I guess are important for the build step...
// io-package.json
"adminUI": {
"config": "json",
"tab": "materialize"
},
"adminTab": {
"singleton": false,
"name": {
// ...
},
"link": "",
"fa-icon": "info"
},
// package.json
"build": "build-adapter all",
"build:backend": "build-adapter ts",
"build:admin": "build-adapter react",
// admin/tsconfig.json
// Specialized tsconfig for the admin directory,
// includes DOM typings and configures the admin build
{
"extends": "../tsconfig.json",
"compilerOptions": {
"noEmit": false,
"outDir": "./build",
"sourceMap": true,
"sourceRoot": "./src",
"noImplicitAny": false,
"lib": ["es2018", "DOM"],
"jsx": "react"
},
"include": ["./**/*.ts", "./**/*.tsx", "../src/lib/adapter-config.d.ts"],
"exclude": ["./**/*.test.ts", "./**/*.test.tsx"]
}