How to use dash_mantine_components in offline environment, where internet connection is not available

Dash Python
1

dash_mantine_component works fine when there’s an internet connection.
However, when I try to use dash_mantine_components in an offline environment, there aren’t any errors, but nothing is displayed.

I encountered a similar issue with dash_bootstrap_components, but solved the issue when I copy the raw data from the link below into the “assets/bootstrap.min.css”. (https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css)

So, I tried inserting the JS file from the link below into the assets as well, but it didn’t work. (https://unpkg.com/dash_mantine_components@0.12.1/dash_mantine_components/dash_mantine_components.js)

Could someone advise me on how to use dash_mantine_component in an offline environment?

2

Hello @wowwwn,

The mantine components sound like they might have an underlying dependency on external libraries.

Could you please post an MRE of what you have tried?

2 Likes
3

HI @wowwwn,

I’m using dash_mantine_component in my company’s PC that have no Internet connection (for security purpose) and it worked without any css. I just used whl file that I downloaded from pypi then install with Anaconda Prompt.

2 Likes
4

Im using python3.11 and my dash_mantine_components version is 0.12.1.
In the __init__.py file of dash_mantine_components , it seems that you need to import the following files from an external source using _js_dist.extend .

_js_dist.extend(
    [
        {
            "relative_package_path": "dash_mantine_components.js",
            "external_url": "https://unpkg.com/{0}@{2}/{1}/{1}.js".format(
                package_name, __name__, __version__
            ),
            "namespace": package_name,
        },
        {
            "relative_package_path": "dash_mantine_components.js.map",
            "external_url": "https://unpkg.com/{0}@{2}/{1}/{1}.js.map".format(
                package_name, __name__, __version__
            ),
            "namespace": package_name,
            "dynamic": True,
        },
    ]
)

So I copied the contents of the “https://unpkg.com/dash_mantine_components@0.12.1/dash_mantine_components/dash_mantine_components.js” file to assets/dash_mantine_components.js. Then I know that the js in assets is applied by default.

Then I tried running the following code:

import dash_mantine_components as dmc
from dash import Dash

app = Dash(__name__)

app.layout = dmc.Alert(
    "Hi from Dash Mantine Components. You can create some great looking dashboards using me!",
    title="Welcome!",
    color="violet",
)

if __name__ == "__main__":
    app.run_server()

However, nothing works and the following message appears in the console through Chrome F12 debuger.

TypeError: Object.fromEntries is not a function
at dash_mantine_components.v0_12_1m1692244112.js:2
at Jt (dash_mantine_components.v0_12_1m1692244112.js:2)
at we (react-dom@16.v2_14_1m1700534637.14.0.min.js:84)
at nh (react-dom@16.v2_14_1m1700534637.14.0.min.js:96)
at zj (react-dom@16.v2_14_1m1700534637.14.0.min.js:230)
at Th (react-dom@16.v2_14_1m1700534637.14.0.min.js:152)
at tj (react-dom@16.v2_14_1m1700534637.14.0.min.js:152)
at Te (react-dom@16.v2_14_1m1700534637.14.0.min.js:146)
at react-dom@16.v2_14_1m1700534637.14.0.min.js:61
at unstable_runWithPriority (react@16.v2_14_1m1700534637.14.0.min.js:25)
ri @ dash_renderer.v2_14_1m1700534637.min.js:2
5

It was my chrome problem.
I used google-chrome Version 72.0.3626.119 which was too old…