Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dependency of @types/react-loadable causes type conflict issues in 2.0.0-beta.7/8 #5772

Closed
5 tasks done
favna opened this issue Oct 22, 2021 · 10 comments · Fixed by #5819
Closed
5 tasks done

Dependency of @types/react-loadable causes type conflict issues in 2.0.0-beta.7/8 #5772

favna opened this issue Oct 22, 2021 · 10 comments · Fixed by #5819
Labels
bug An error in the Docusaurus core causing instability or issues with its execution

Comments

@favna
Copy link
Contributor

favna commented Oct 22, 2021

🐛 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 ( N.A. because those samples are using JavaScript and this is TypeScript issue. There is a repository linked below)
  • I have read the console error message carefully (if applicable)

Description

In the PR #5601 a change was made to ensure @types packages are in the dependencies instead of the dev-dependencies. This however introduced a regression issue in @docusaurus/module-type-aliases through @types/react-loadable. Specifically, those types still depend on @types/webpack ^4 which conflicts with Docusaurus using Webpack 5 as of #4089.

I have already added "skipLibCheck": true to my /tsconfig.json but that is completely to no avail. I don't know how Docusaurus reads the tsconfig exactly but it seems to disregard at least that property.

My suggestion for the fix is one of:

  • Remove the entire @types/react-loadable dependency. You guys have your own @docusaurus/react-loadable fork. I'm not sure why @docusaurus/module-type-aliases is even depending on the types? Why not add the necessary types that you do need to your fork so you have no dependency at all anymore on the original work?
  • Move at least @types/react-loadable back to dev-dependencies
  • Ensure @types/react-loadable starts using Webpack v5 by contributing that to DefinitelyTyped

Here are some console outputs and yarn lockfile dumps:

yarn why @types/webpack -R
└─ root-website@workspace:.
   └─ @docusaurus/module-type-aliases@npm:2.0.0-beta.8 (via npm:2.0.0-beta.8)
      └─ @types/react-loadable@npm:5.5.6 (via npm:*)
         └─ @types/webpack@npm:4.41.31 (via npm:^4)
"@docusaurus/module-type-aliases@npm:2.0.0-beta.8":
  version: 2.0.0-beta.8
  resolution: "@docusaurus/module-type-aliases@npm:2.0.0-beta.8"
  dependencies:
    "@types/react": "*"
    "@types/react-helmet": "*"
    "@types/react-loadable": "*"
    "@types/react-router-config": "*"
    "@types/react-router-dom": "*"
  checksum: 995ea7c62fab5968abd2b0d61b2ec6f0362e32d5fd27363eb15f90cd8e299777c56e4d82f1b09aebd45b18a6601f9e122ccb1b1d7dea6dc74f0e2f2116167628
  languageName: node
  linkType: hard

"@types/react-loadable@npm:*":
  version: 5.5.6
  resolution: "@types/react-loadable@npm:5.5.6"
  dependencies:
    "@types/react": "*"
    "@types/webpack": ^4
  checksum: 395ff992cf8dbbd425aa79cc298987b464eab875b7057cb4475bfcabd17780d074cf3b7e2511f494fb8e4105a3fe5c9218237f8205f498c38b63671605463415
  languageName: node
  linkType: **hard**

"@types/webpack@npm:^4":
  version: 4.41.31
  resolution: "@types/webpack@npm:4.41.31"
  dependencies:
    "@types/node": "*"
    "@types/tapable": ^1
    "@types/uglify-js": "*"
    "@types/webpack-sources": "*"
    anymatch: ^3.0.0
    source-map: ^0.6.0
  checksum: 8aa4b4ad68bb7a6ee5bd027005014e6242434162ed4c14cd251713ad6041e42bf7629fc56a5edc5a2124b49cc0dce273d6ee3386fae9a9cfe02e1f7e82087ea2
  languageName: node
  linkType: hard

Have you read the Contributing Guidelines on issues?

Yes 😄!

Steps to reproduce

Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug., N.A. because those samples are using JavaScript and this is TypeScript issue. I have a branch on my repo, however.

  1. Clone the repo with submodules: git clone --recurse-submodules -j8 https://github.com/sapphiredev/website.git && git submodule update --init --recursive
  2. Checkout the branch called feat/update-to-docusaurus-beta-8
  3. Run yarn install to setup the dependency tree (note: due to submodules being in the yarn workspace this takes a bit)
  4. Run yarn start.

Expected behavior

Everything builds fine without type errors. I have no breaking changes to cover between betas 6 and 8.

Actual behavior

When running docusaurus start with 2.0.0-beta.8 I get all of these type errors from node_modules directories:

click me to expand large code block
Error: node_modules/@types/webpack/index.d.ts:32:3 - error TS2305: Module '"tapable"' has no exported member 'Tapable'.

32   Tapable,
     ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1081:23 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1081             resolver: SyncWaterfallHook;
                           ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1082:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1082             factory: SyncWaterfallHook;
                          ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1083:28 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1083             beforeResolve: AsyncSeriesWaterfallHook;
                                ~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1084:27 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1084             afterResolve: AsyncSeriesWaterfallHook;
                               ~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1085:27 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1085             createModule: SyncBailHook;
                               ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1086:21 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1086             module: SyncWaterfallHook;
                         ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1087:27 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1087             createParser: HookMap;
                               ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1089:30 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1089             createGenerator: HookMap;
                                  ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1090:24 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1090             generator: HookMap;
                            ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1099:33 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1099                 evaluateTypeof: HookMap;
                                     ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1100:27 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1100                 evaluate: HookMap;
                               ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1101:37 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1101                 evaluateIdentifier: HookMap;
                                         ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1102:44 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1102                 evaluateDefinedIdentifier: HookMap;
                                                ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1103:47 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1103                 evaluateCallExpressionMember: HookMap;
                                                   ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1104:28 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1104                 statement: SyncBailHook;
                                ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1105:30 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1105                 statementIf: SyncBailHook;
                                  ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1106:24 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1106                 label: HookMap;
                            ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1107:25 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1107                 import: SyncBailHook;
                             ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1108:34 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1108                 importSpecifier: SyncBailHook;
                                      ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1109:25 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1109                 export: SyncBailHook;
                             ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1110:31 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1110                 exportImport: SyncBailHook;
                                   ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1111:36 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1111                 exportDeclaration: SyncBailHook;
                                        ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1112:35 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1112                 exportExpression: SyncBailHook;
                                       ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1113:34 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1113                 exportSpecifier: SyncBailHook;
                                      ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1114:40 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1114                 exportImportSpecifier: SyncBailHook;
                                            ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1115:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1115                 varDeclaration: SyncBailHook;
                                     ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1116:36 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1116                 varDeclarationLet: HookMap;
                                        ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1117:38 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1117                 varDeclarationConst: HookMap;
                                          ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1118:36 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1118                 varDeclarationVar: HookMap;
                                        ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1119:28 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1119                 canRename: HookMap;
                                ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1120:25 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1120                 rename: HookMap;
                             ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1121:27 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1121                 assigned: HookMap;
                               ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1122:25 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1122                 typeof: HookMap;
                             ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1123:29 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1123                 importCall: SyncBailHook;
                                 ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1124:23 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1124                 call: HookMap;
                           ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1125:32 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1125                 callAnyMember: HookMap;
                                    ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1126:22 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1126                 new: HookMap;
                          ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1127:29 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1127                 expression: HookMap;
                                 ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1128:38 - error TS2314: Generic type 'HookMap<H>' requires 1 type argument(s).

1128                 expressionAnyMember: HookMap;
                                          ~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1129:48 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1129                 expressionConditionalOperator: SyncBailHook;
                                                    ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1130:44 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1130                 expressionLogicalOperator: SyncBailHook;
                                                ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1131:26 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1131                 program: SyncBailHook;
                              ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1140:28 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1140             beforeResolve: AsyncSeriesWaterfallHook;
                                ~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1141:27 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1141             afterResolve: AsyncSeriesWaterfallHook;
                               ~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1142:33 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1142             contextModuleFiles: SyncWaterfallHook;
                                     ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1143:27 - error TS2707: Generic type 'AsyncSeriesWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1143             alternatives: AsyncSeriesWaterfallHook;
                               ~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1163:21 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1163             unseal: SyncHook;
                         ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1164:19 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1164             seal: SyncHook;
                       ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1166:40 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1166             optimizeDependenciesBasic: SyncBailHook<Module[]>;
                                            ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1167:35 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1167             optimizeDependencies: SyncBailHook<Module[]>;
                                       ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1168:43 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1168             optimizeDependenciesAdvanced: SyncBailHook<Module[]>;
                                               ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1171:23 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1171             optimize: SyncHook;
                           ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1173:35 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1173             optimizeModulesBasic: SyncBailHook<Module[]>;
                                       ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1174:30 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1174             optimizeModules: SyncBailHook<Module[]>;
                                  ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1175:38 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1175             optimizeModulesAdvanced: SyncBailHook<Module[]>;
                                          ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1190:27 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1190             shouldRecord: SyncBailHook;
                               ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1209:25 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1209             beforeHash: SyncHook;
                             ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1210:24 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1210             afterHash: SyncHook;
                            ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1216:33 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1216             beforeModuleAssets: SyncHook;
                                     ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1217:40 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1217             shouldGenerateChunkAssets: SyncBailHook;
                                            ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1218:32 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1218             beforeChunkAssets: SyncHook;
                                    ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1223:31 - error TS2707: Generic type 'AsyncSeriesHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1223             additionalAssets: AsyncSeriesHook;
                                   ~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1229:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1229             needAdditionalSeal: SyncBailHook;
                                     ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1230:24 - error TS2707: Generic type 'AsyncSeriesHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1230             afterSeal: AsyncSeriesHook;
                            ~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1238:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1238             needAdditionalPass: SyncBailHook;
                                     ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1239:28 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1239             childCompiler: SyncHook;
                                ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1243:43 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1243             optimizeExtractedChunksBasic: SyncBailHook<Chunk[]>;
                                               ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1244:38 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1244             optimizeExtractedChunks: SyncBailHook<Chunk[]>;
                                          ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1245:46 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1245             optimizeExtractedChunksAdvanced: SyncBailHook<Chunk[]>;
                                                  ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1258:27 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1258             jsonpScript?: SyncWaterfallHook<string, Chunk, string> | undefined;
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1259:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1259             require: SyncWaterfallHook<string, Chunk, string>;
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1260:32 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1260             requireExtensions: SyncWaterfallHook<string, Chunk, string>;
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1261:28 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1261             requireEnsure: SyncWaterfallHook<string, Chunk, string>;
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1262:24 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1262             localVars: SyncWaterfallHook<string, Chunk, string>;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1263:27 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1263             afterStartup: SyncWaterfallHook<string, Chunk, string>;
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1277:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1277             content: SyncWaterfallHook;
                          ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1278:21 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1278             module: SyncWaterfallHook;
                         ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1279:21 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1279             render: SyncWaterfallHook;
                         ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1280:22 - error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1280             package: SyncWaterfallHook;
                          ~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1281:19 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1281             hash: SyncHook;
                       ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1375:25 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1375             shouldEmit: SyncBailHook<Compilation>;
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1377:29 - error TS2707: Generic type 'AsyncSeriesHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

1377             additionalPass: AsyncSeriesHook;
                                 ~~~~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1393:25 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1393             watchClose: SyncHook;
                             ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1394:26 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1394             environment: SyncHook;
                              ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1395:31 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1395             afterEnvironment: SyncHook;
                                   ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1398:26 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1398             entryOption: SyncBailHook;
                              ~~~~~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1418:25 - error TS2707: Generic type 'SyncHook<T, R, AdditionalOptions>' requires between 1 and 3 type arguments.

1418             watchClose: SyncHook;
                             ~~~~~~~~

Error: node_modules/@types/webpack/index.d.ts:1485:24 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

1485         _pluginCompat: SyncBailHook<compilation.Compilation>;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Your environment

  • Public source code: https://github.com/sapphiredev/website/tree/feat/update-to-docusaurus-beta-8
  • Public site URL: N.A. We're currently do not yet have a production release.
  • Docusaurus version used: 2.0.0-beta.8
  • Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Vivaldi | 4.3.2439.44, Node.js v16.12.0, Yarn v3.0.2
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 Build 22000.282

Reproducible demo

Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug. N.A., see reason above.

  1. Clone the repo with submodules: git clone --recurse-submodules -j8 https://github.com/sapphiredev/website.git && git submodule update --init --recursive
  2. Checkout the branch called feat/update-to-docusaurus-beta-8
  3. Run yarn install to setup the dependency tree (note: due to submodules being in the yarn workspace this takes a bit)
  4. Run yarn start.
@favna favna added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Oct 22, 2021
@favna favna changed the title Dependency of @types/react-loadable causes type conflict issues starting in 2.0.0-beta.7 Dependency of @types/react-loadable causes type conflict issues in 2.0.0-beta.7/8 Oct 22, 2021
@Josh-Cena
Copy link
Collaborator

Josh-Cena commented Oct 23, 2021

Mmmm, I do remember seeing these errors somewhere, but now I can't reproduce elsewhere. skipLibCheck won't work because it only gives up on checking transitive declarations. Observations:

  • yarn tsc in our own website succeeded (and our website has covered a lot of possible usage cases)
  • yarn tsc / yarn start on two of my websites using Docusaurus (one with quite some customizations) succeeded
  • Removing all the Typedoc plugins on your website fixed the type errors.

I think that's sufficient to conclude that at least this is not a widespread issue. Not to dismiss your issue as irrelevant or unimportant, but I think we either need to look into the setup of docusaurus-plugin-typedoc or find a patching solution on your side, e.g. setting "resolutions": {"@types/webpack": "^5.28.0"} since you are using yarn

  • Remove the entire @types/react-loadable dependency. You guys have your own @docusaurus/react-loadable fork. I'm not sure why @docusaurus/module-type-aliases is even depending on the types? Why not add the necessary types that you do need to your fork so you have no dependency at all anymore on the original work?

Per documentation of this fork:

IMPORTANT: this is a minimalistic fork to solve the componentWillMount warning for the facebook/docusaurus project.

We don't plan to maintain this problem, just get rid of the warning.

Also, we still import the modules as 'react-loadable' through Webpack alias, so we do need type definitions on the @types/react-loadable side.

  • Ensure @types/react-loadable starts using Webpack v5 by contributing that to DefinitelyTyped

I'm actually unsure why @types/react-loadable depends on @types/webpack@^4 when there's also a @types/webpack@5 available, perhaps a DT publishing problem. I'll consult what's the best solution to this

@favna
Copy link
Contributor Author

favna commented Oct 23, 2021

I actually did try adding @types/webpack to my resolutions as you suggested so when you I saw your edit I figured maybe I misremembered and it did work. I went ahead and tried again, and now I see again why it didn't work.

For whatever reason doing so causes a JavaScript Heap Out Of Memory issue. I ran docusaurus start also with --max-old-space-size=4096 but to no avail. I then tried --inspect ----max-old-space-size=4096 which suddenly worked, however as I was in the debugger at the same time I did get a breakpoint where Node detected a possible memory leak, which was in TypeScript code. This was while as far as Docusaurus was concerned it was still running typedoc things.

Then I tried bumping the max old space to 5120 and that actually seems to have it work consistently.

What in tarnation sake could be causing it to need >= 4GB && < 5 GB RAM just to run is truly beyond me. It sure as heck can't be my hardware specs (64 GB RAM @ 3200 MHz, Ryzen 3900X).

What's also notable is that this extreme RAM requirement is only for typedoc, because once the webpack server is running the Node application is consuming about 920 MB of RAM on my system which is a pretty reasonable amount considering the V8 engine is likely to realize there's so much available anyway that it might as well. (My browser commonly consumes 1-1.5 GB RAM as well, even with just a few tabs open)

For now what I think I'll do is update to beta 8, add the resolutions field and make this change in our scripts but I'd really like to help in any way I can with getting to the bottom of why the typedoc plugin consumes so much RAM when tasked with the amount of projects that we task it with.

-        "docusaurus": "docusaurus",
-        "start": "docusaurus start",
-        "build": "docusaurus build",
+        "docusaurus": "cross-env NODE_OPTIONS=\"--max-old-space-size=5120\"",
+        "start": "cross-env NODE_OPTIONS=\"--max-old-space-size=5120\" docusaurus start",
+        "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=5120\" docusaurus build",

@Josh-Cena
Copy link
Collaborator

That I have no idea. I suspect it's that typedoc goes into the entire webpack to map out the type information which brings in a lot of overhead, compared to the much smaller @types/webpack.

@slorber
Copy link
Collaborator

slorber commented Oct 27, 2021

react-loadable is not maintained anymore and our fork just made some fixes for webpack 5 afaik.

We could basically just replace its typedefs with any and get rid once for all of Webpack 4 typings, that wouldn't be so harmful.

I'd like to replace it someday but considering React.lazy SSR + Suspense support is coming in React 18, I'd rather not migrate to loadable-components now.

@Josh-Cena
Copy link
Collaborator

@slorber Do you by any chance know why react-loadable still works in WP5 without any changes? Is our usage not touching any WP4 API?

@slorber
Copy link
Collaborator

slorber commented Oct 27, 2021

It works because there were no Webpack breaking changes affecting it, by luck.

Apparently my fork only removed the annoying deprecation warning:
https://github.com/slorber/react-loadable/commits/master

I'm trying to get a docusaurus-core org to move all our forks there and make things more explicit

@Josh-Cena
Copy link
Collaborator

Yeah, I'm asking because of this remark

@slorber
Copy link
Collaborator

slorber commented Oct 29, 2021

please test the canary release

@favna
Copy link
Contributor Author

favna commented Oct 29, 2021

@slorber I just tried out Canary (0.0.0-4137) and can confirm that this issue is fixed. I no longer need the cross-env NODE_OPTIONS=\"--max-old-space-size=5120\", nor the resolution for @types/webpack (which doesn't get installed at all anymore now, as it should be). Thanks for the awesome work!

@slorber
Copy link
Collaborator

slorber commented Oct 29, 2021 via email

@Josh-Cena Josh-Cena added bug An error in the Docusaurus core causing instability or issues with its execution and removed bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Feb 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants