asked 6 days ago
I'm trying to configure Flexmonster to be used inside a Umbraco Property Editor Extension (https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-property-editor)
I've two issues:
1 - importing css is not possible using the "import" process on the ts file. TS compiler doens't find the module: "Cannot find module 'flexmonster/flexmonster.css' or its corresponding type declarations."
As a workaround I can include a reference for the CSS file when redenring html:
return html
<link rel="stylesheet" href="/App_Plugins/FlexmonsterReportEditor/flexmonster/flexmonster.css"></link>
<div id="pivotContainer">The Flexmonster component will appear here</div>
;
This way, the component load the CSS but keep warning about css versions mismatch:
flexmonster-report-editor.ts:35 Flexmonster: CSS version mismatch.
Versions of Flexmonster specified in the CSS and JS files do not match.
The version of Javascript: 2.9.104, the version of CSS: .
2 - the second problem is related to the component itself. No matter what I do regarding the "componentFolder", I keep getting the error message:
flexmonster.full.js:110 Uncaught TypeError: Cannot read properties of null (reading 'element')
at new o (flexmonster.full.js:110:184)
at c.Ke (flexmonster.full.js:1646:152)
at flexmonster.full.js:1634:304
I don't know exacly what can I do. Is there any additional css or js file we need to load from "flexmonster" folder? How can I import it in my component so the frontend loads the needed files?
For some reason, I can't attach the vite project so you can take a look at it if needed, so I will share it by this link FlexmonsterReportEditor.zip
⋅ 5 days ago
Hello, Tiago!
Thank you for reaching out to us.
Kindly note that the described case can be caused by specific configurations of the bundler. Some bundlers include all files automatically, but usually, you need to configure the following:
flexmonster.full.js in the bundler.flexmonster.min.css file in the build.node_modules/flexmonster/theme/assets/ folder and included in the build. Note that the assets folder needs to be located in the same directory as flexmonster.min.css to maintain relative paths.We think that our documentation on integrating with module bundlers might also be helpful, even though it primarily focuses on WebPack examples: https://www.flexmonster.com/doc/integration-with-module-bundlers/.
Hope it helps.
Looking forward to your response.
Kind regards,
Solomiia