Utils cannot find react module

[ltribolet]

🐛 Bug Report

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 have a theme package that I test through an example docusaurus instance (which is basically borrowed from here). The example instance lives inside the them package /example.

For testing purposes, I require the package with a symlink which gives me flexibility while developing, in my docusaurus.config.js:

  themes: [require.resolve("../src/index.js")],

However, I recently updated the @docusaurus/utils-validation package from 2.0.0-beta.6 to 2.0.0-beta.8 and running

It seems to come down to this recently introduced change #4330

I also tried to make react a dependency but it ends up loaded twice and makes everything fail.

Steps to reproduce

1. Create a theme/plugin
2. Validate it with joi imported from @docusaurus/utils-validation
3. Add it as dependency in any docusaurus instance
4. yarn build

Expected behavior

The example website would build without error.

Actual behavior

yarn build in example instance gives me this issue:

$ yarn build
yarn run v1.22.5
warning ../package.json: No license field
$ docusaurus build

[en] Creating an optimized production build...
Unable to build website for locale "en".
Error: Cannot find module 'react'
Require stack:
- /<redacted-fullpath>/my-package/node_modules/@docusaurus/utils/lib/mdxUtils.js
- /<redacted-fullpath>/my-package/node_modules/@docusaurus/utils/lib/index.js
- /<redacted-fullpath>/my-package/node_modules/@docusaurus/utils-validation/lib/validationSchemas.js
- /<redacted-fullpath>/my-package/node_modules/@docusaurus/utils-validation/lib/validationUtils.js
- /<redacted-fullpath>/my-package/node_modules/@docusaurus/utils-validation/lib/index.js
- /<redacted-fullpath>/my-package/src/validateThemeConfig.js
- /<redacted-fullpath>/my-package/src/index.js
- /<redacted-fullpath>/my-package/example/node_modules/@docusaurus/core/lib/server/plugins/init.js
- /<redacted-fullpath>/my-package/example/node_modules/@docusaurus/core/lib/server/plugins/index.js
- /<redacted-fullpath>/my-package/example/node_modules/@docusaurus/core/lib/server/index.js
- /<redacted-fullpath>/my-package/example/node_modules/@docusaurus/core/lib/commands/build.js
- /<redacted-fullpath>/my-package/example/node_modules/@docusaurus/core/lib/index.js
- /<redacted-fullpath>/my-package/example/node_modules/@docusaurus/core/bin/docusaurus.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._resolveFilename (/<redacted-fullpath>/my-package/example/node_modules/module-alias/index.js:49:29)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/<redacted-fullpath>/my-package/node_modules/@docusaurus/utils/lib/mdxUtils.js:11:46)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/<redacted-fullpath>/my-package/node_modules/@docusaurus/utils/lib/index.js:23:27)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used: 2.0.0-beta.8
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): v14.15.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS

Reproducible demo

Since my code isn't public and you don't have a theme/plugin template available for me to test if it's tied to my code or to produce a demo, those are the more or like the reproducible steps.

Create a package with the following dependencies:

  "peerDependencies": {
    "react": "^16.8.4 || ^17.0.0",
    "react-dom": "^16.8.4 || ^17.0.0"
  },
  "dependencies": {
    "@docusaurus/types": "^2.0.0-beta.8",
    "@docusaurus/utils-validation": "^2.0.0-beta.6",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/react-helmet": "^6.1.4",
    "clsx": "^1.1.1",
    "parse-numeric-range": "^1.3.0",
    "prettier": "^2.4.1",
    "prism-react-renderer": "^1.2.1"
  }

index.js:

const path = require('path');
const {validateThemeConfig} = require('./validateThemeConfig');


function theme(context, options) {
  return {
    name: 'my-theme',

    getThemePath() {
      return path.resolve(__dirname, './theme');
    },
  };
};

module.exports = theme;

Validate it by importing joi as follow:

const {Joi} = require('@docusaurus/utils-validation');

const Schema = Joi.object({});
exports.Schema = Schema;

exports.validateThemeConfig = function ({validate, themeConfig}) {
    return validate(Schema, themeConfig);
};

Then create an example application within the new package folder:

npm init docusaurus@latest example

Update the docusaurus.config.js to include the parent package:

  themes: [require.resolve("../src/index.js")],

[Josh-Cena]

This seems to be a duplicate of #5803. Let's move the discussion there