React 18 Upgrade + Dependencies related

[pvieiraguimaraes]

Context

The ADS (Agnostic Design System) is configured with Storybook 6.5 and is using many addons/plugins for the documents files, one of them is the MDX

Describe the issue

After upgrading to React 18, we started facing issues loading the MDX (v1 currently in use supports only React 17 or lower) and MDX 2 is now a library ESModule only. Check here for more details https://mdxjs.com/migrating/v2/#esm. After trying to upgrade the MDX to v2 we started facing the ESM loading issue described by the migrating doc above due to our ADS being configured and using the CommonJS standard to load modules.

Expected Behavior

We should be able to load the documents and stories created using MDX, which should work as expected after the upgrades.
The markdowns used in the documents and stories should be converted and displayed as expected.

Screenshots

How should it work

How is working after the upgrade (The markdowns are not being converted)

And also, the MDX documents are not loading anymore:
src/docs/Contribute.document.mdx
src/docs/Customization.document.mdx
src/docs/Contribute.document.mdx

Additional information

Possible solutions to solve the issue:
1- Convert our ADS library to an ESModule package, this approach will be required checking all dependencies (not using the ESModule and checking if we have compatibility, proceeding with the according changes required, and migrating all of them if that is the case) will require an investigation for the dependencies (we started this approach in this branch #521)
We might need to keep diving into the dependencies to check if it is possible to migrate them:

/Users/pedroguimaraes/Codelitt/projects/agnostic-design-system/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64
  var result = require(filePath);
               ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/pedroguimaraes/Codelitt/projects/agnostic-design-system/.storybook/main.js from /Users/pedroguimaraes/Codelitt/projects/agnostic-design-system/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/pedroguimaraes/Codelitt/projects/agnostic-design-system/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

2- Start a new react project, installing the Storybook latest version (6.5 while opening this issue..)

• Install and configure the Storybook in this new project using the React 18
• Install and configure the MDX addon within the Storybook installation
• Migrate the components and documents/stories to this new installation

Additional thread related to the issue in the storybookjs
storybookjs/storybook#18094