asked on May 28, 2025
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
⋅ May 29, 2025
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 theme 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
⋅ June 5, 2025
Hello, Tiago!
Hope you are doing well.
Our team is wondering if you had some time to check our previous response. Could you please let us know if it was helpful in configuring the bundler?
Looking forward to hearing from you.
Kind regards,
Solomiia
⋅ June 19, 2025
Hello, Tiago!
Hope you are having a great week.
Just checking in to ask if our previous response was helpful in configuring the bundler.
Looking forward to hearing your feedback.
Kind regards,
Solomiia
⋅ September 11, 2025
Hello Solomiia,
Sorry for the delay in replying. I’ve recently come back to this topic and I’m still having issues. I’m using Vite, which according to your documentation doesn’t require extra configuration since it copies everything to the output folder. When I run my solution, I can see the flexmonster.css in the browser sources, but the errors persist with the icon fonts. Could you help?
⋅ September 12, 2025
Hello, Tiago!
Thank you for getting back to us.
Kindly note that Flexmonster uses font-based icons, with the font being referenced in CSS styles via a relative path.
To further investigate the case, please verify the following:
theme/assets/ folder.flexmonster.min.css / flexmonster.css file is located in the same directory as theme/assets/ (by default, this is node_modules/flexmonster/).theme/assets/ folder is properly included in the build.Please let us know if the described behavior is still reproducible after verifying all the points above.
Looking forward to hearing from you.
Kind regards,
Solomiia
⋅ 5 days ago
Hello,
All the files/folders are located as referred. theme/assets is not directly referenced in the build because of this sentence on you docs: "When using a bundler, you need to properly bundle Flexmonster's assets (e.g., styles, fonts, and icons). Some bundlers, like Vite, can do it automatically...".
Should I include it?
⋅ 5 days ago
Hello, Tiago!
Thank you for your quick response.
Our team recommends you to include theme\assets folder in the build manually to ensure all icons are present in the build. Kindly note that while Vite does include assets automatically for some generic setups, there may be cases where manual adjustments are required.
Please let us know if everything works well after including the theme\assets folder.
Kind regards,
Solomiia
⋅ 5 days ago
I've figure it out apparently. The problem was a configuration on my vite server that was blocking the "automatic" copy.
I really appreciate your help in finding the source of the problem.
⋅ 5 days ago
Hello, Tiago!
Thank you for your feedback.
We are happy to hear that everything works well now.
Feel free to reach out to us in case of any other questions.
Kind regards.
Solomiia