bug: SetupConfig does not work with Ionic React (v6)

[BerkeAras]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Ionic setupConfig does not work with React. Just no behavior, no response, no error.

Expected Behavior

SetupConfig should override the existing default configuration.

Steps to Reproduce

Create new ionic react app, update to Ionic v6 (how can I update to the beta?), try setupConfig.

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

Code Example:

import { useEffect } from 'react';
import { Capacitor } from '@capacitor/core';
import { Keyboard } from '@capacitor/keyboard';
import { IonApp, IonRouterOutlet, IonSplitPane, setupConfig } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';


/* Theme variables */
import './theme/variables.scss';

/* Pages */
import PageHome from './pages/default/Home/Home';

setupConfig({ mode: 'md' });

const App = () => {
.........

[averyjohnston]

Thanks for the report; confirming I can replicate 👍 I'm indeed only seeing this with React (not Angular or Vue) and confirmed that setupConfig itself isn't working, rather than it being any particular property.

It looks like the issue is here: https://github.com/ionic-team/ionic-framework/blob/next/core/src/utils/config.ts#L206 The check is always returning, as Ionic.config is defined and Ionic.config.constructor.name is 'Config'.

[liamdebeasi]

Thanks for the issue. This has been resolved via #24254, and a fix will be available in an upcoming release of Ionic Framework.

In order to make this change we unfortunately had to make a small breaking change due to how the new custom elements build works. In Ionic 6, developers will need to import and call the setupIonicReact function exported from @ionic/react. This function is used in place of setupConfig, but should be called by all developers even if they are not setting a custom config.

This is noted in the breaking changes guide: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md#config-2

We will make sure to note this when the Ionic 6 migration guide goes live. The setupIonicReact function will be available in an upcoming release of Ionic 6. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.