Getting invalid hooks error when loading markdown outside of docusaurs's root folder

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I don’t think it is a Docusaurus problem itself but I’m missing some knowledge on internals to debug my situation.

When trying to import a file outside of the docusaurus folder in a monorepo like

/```mdx-code-block 
import Contributingfrom "@site/../CONTRIBUTING.md"

<Contributing />
/```

I’m getting the basic invalid hook error

It is coming from the useMDXComponents hooks apparently.

So I figured it was a dependency conflict with my monorepo. I can confirm it is a dependency problem by removing the packages to test this.

All my react/react-dom versions are identical, so it looks like it is a problem with react being loaded twice problem.

Since I’m only loading a plain markdown file, I don’t understand why that would start conflicting. Do you have some pointers/recommendations to fix this?

Reproducible demo

No response

Steps to reproduce

I couldn’t pinpoint the exact problem sadly and need some insights about how docusaurus might be import things

Expected behavior

No hooks error when loading md files outside of docusaurus folder

Actual behavior

Getting the invalid hook error.

Your environment

• Docusaurus version used:2.1.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): node 18
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): mac os monterey

Self-service

• I’d be willing to fix this bug myself.

[alexandrebodin]

The proposed webpack config worked like a charm. Thanks for the tip 👍

I’m going to go ahead and close this issue now. Thank you for your help

[pdillon]

I ran into a similar issue, but not with mdx. Not sure if this would work for you, but adding this to plugins in docusaurus.config.js worked for me:

 plugins: [
    () => ({
      name: 'resolve-react',
      configureWebpack() {
        return {
          resolve: {
            alias: {
              // assuming root node_modules is up from "./packages/<your-docusaurus>
              react: path.resolve('../../node_modules/react'), 
            },
          },
        };
      },
    }),
    // ... other plugins