Error: No themeName was provided. On modal open

[canhnm]

Hello,

We are noticing an issue when trying open modal and there is a ComboBox component in this modal there will be console error: No themeName was provided as on the photo bellow.

Thanks,

[HQCuong]

Hello @canhnm!
I tried to replicate the bug but was unsuccessful. Could you provide me with some additional information, such as:

• Have you wrapped your components inside the AppProvider component?
• Could you give me an example of how you structure the Modal (which components are wrapped, how the props are passed, etc.)?

[canhnm]

Hello,

We are on version 2.0.1

• AppProvider component => Yes, all of the other feature work well.
• Structure is:
  Parent page :

<template>
    <Page :title="$t('breadcrumb.pricing.title')"
        :back-action="$route.query.action == 'finished' ? { content: '', onAction: goToBoard } : ''"
    >
        <InlineStack align="center" style="margin: var(--p-space-400) 0">
            <Button style="border: solid var(--p-border-width-025); padding: var(--p-space-0); box-shadow: var(--p-shadow-0); background-color: var(--p-color-bg-surface-secondary-hover);">
                <Button @click="checked_annually = !checked_a" :class="checked_a ? 'text-button-disable' : ''" :variant="!checked_annually ? 'primary' : 'tertiary'">
                </Button>
                <Button @click="checked_b = !checked_b " :class="!checked_b ? 'text-button-disable' : ''" :variant="checked_annually ? 'primary' : 'tertiary'">
                </Button>
            </Button>
        </InlineStack>
        <Grid>
            <GridCell :key="index"
                v-for="(card, index) in planCards"
                :columnSpan="{ xs: 6, md: 6, lg: 4 }"
            >
                <PlanDetailCard :data="card" @emit-choose-plan="onChoosePlan"></PlanDetailCard>
            </GridCell>
        </Grid>
        <LegacyCard
            style="height: 100%; margin-top: var(--p-space-400)"
        >
            <template #title>
                <CardTitle>
                </CardTitle>
            </template>
            <LegacyCardSection style="height: 100%">
                <LegacyStack distribution="equalSpacing" fill>
                    <LegacyStackItem >
                        <LegacyStack spacing="extraTight">
                            <LegacyStack  spacing="extraTight" style="align-items: baseline;">
                                <Text variant="headingMd">
                                </Text>
                                <LegacyStack alignment="trailing" spacing="tight">
                                    <Text
                                        variant="heading3xl"
                                        style="line-height: var(--p-font-line-height-1200)"
                                    >
                                    </Text>
                                </LegacyStack>
                                <DescriptionText
                                    style="color: var(--p-color-text-secondary)"
                                >
                                </DescriptionText>
                                <Badge
                                    v-if="planCardFreeAndEb.discount"
                                    :status="getStatusBadge(planCardFreeAndEb.discount)"
                                >
                                </Badge>
                            </LegacyStack>
                        </LegacyStack>
                        <DescriptionText
                            v-if="planCardFreeAndEb.desc"
                            style="margin-top: var(--p-space-100); color: var(--p-color-text-secondary);"
                        >
                        </DescriptionText>
                        <DescriptionText v-else style="color: var(--p-color-text-secondary)">
                        </DescriptionText>
                    </LegacyStackItem >
                    <LegacyStackItem >
                        <Button
                            :disabled="planCardFreeAndEb.current_plan"
                            :primary="planCardFreeAndEb.is_update"
                            fullWidth
                            @click="onChoosePlan(planCardFreeAndEb)"
                        >
                        </Button>
                    </LegacyStackItem >
                </LegacyStack>
            </LegacyCardSection>
        </LegacyCard>
        
        
        <SingleFeatureModal :active="showSingleFeature" @close="showSingleFeature = false"/>
        <DowngradePlanModal :active="showDowngradePlanModal"
            :data="dataDowngradePlanModal"
            @close="showDowngradePlanModal = false"
            @downgrade="handleDowngradePlan"
        />
    </Page>
</template>

<script>

And the DowngradePlanModal :

<template>
    <Modal
        sectioned
        :open="active"
        @close="toggle"
        :secondaryActions="[
            {
                content: $t('buttonText.cancel'),
                onAction: () => {
                    handleClose()
                }
            },
            {
                content: $t('pricingText.yes_downgrade', {plan: n_data.plan_name}),
                onAction: () => {
                    handleDowngradePlan()
                },
                destructive: true,
            },
        ]"
    >
        <template #title>
            {{ $t('pricingText.downgrade_to_plan', {plan: n_data.plan_name}) }}
        </template>
        <BlockStack gap="200">
            <Text variant="headingMd">
                {{ $t('pricingText.downgrade_modal.lose_benefits') }}
            </Text>
            <List type="bullet">
                <ListItem v-for="(item, index) in n_data.list" :key="index">
                    <DescriptionText>
                        {{ item }}
                    </DescriptionText>
                </ListItem>
            </List>
            <Banner tone="info">
                <BlockStack gap="200">
                    <DescriptionText variant="headingMd">{{ $t('pricingText.downgrade_modal.title_reason') }}</DescriptionText>
                    <div style="display: none;">
                        <BonDatePicker/>
                    </div>
                    <Listbox @select="handleOptionSelected">
                        <ListboxOption
                            v-for="(option, index) in reasonChoices"
                            :key="index"
                            :value="option.value"
                            :selected="selectedOptions.includes(option.value)"
                        >
                            <div
                                style="
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer
                                "
                            >
                                <!-- eslint-disable-next-line max-len -->
                                <Checkbox style="margin-left: var(--p-space-200)" :checked="selectedOptions.includes(option.value)" />
                                <DescriptionText>
                                    {{ option.label }}
                                </DescriptionText>
                            </div>
                        </ListboxOption>
                    </Listbox>
                    <div v-if="isOnlyOtherReason()">
                        <TextField
                            v-model="otherReason"
                            autoComplete="off"
                            :multiline="4"
                        />
                    </div>
                </BlockStack>
            </Banner>
        </BlockStack>
    </Modal>
</template>

<script>
import SelectIcon from '@shopify/polaris-icons/dist/svg/SelectIcon.svg'
import { mapState } from 'vuex'
import BonDatePicker from '../../components/global/BonDatePicker.vue'
....
</script>

The issue happens once Downgrade Button clicked and DowngradePlanModal show up