Webpack 5 `Cant Resolve` errors in `v2.0.0-rc.58`

[ajrice6713]

Describe the bug Running Redoc Standalone in Docusaurus 2.0.0-beta.9 and getting webpack issues stemming from the redoc openapi-core library, which does not seem to be open source

Module not found: Error: Can't resolve 'path' in '/Users/mySite/site/node_modules/@redocly/openapi-core/lib/config'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

Module not found: Error: Can't resolve 'path' in '/Users/mySite/site/node_modules/@redocly/openapi-core/lib/redocly'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

Module not found: Error: Can't resolve 'os' in '/Users/mySite/site/node_modules/@redocly/openapi-core/lib/redocly'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

Module not found: Error: Can't resolve 'path' in '/Users/mySite/site/node_modules/@redocly/openapi-core/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

Module not found: Error: Can't resolve 'tty' in '/Users/mySite/site/node_modules/@redocly/openapi-core/node_modules/colorette'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }'
    - install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "tty": false }

Module not found: Error: Can't resolve 'buffer' in '/Users/mySite/site/node_modules/yaml/browser/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }
client (webpack 5.65.0) compiled with 6 errors and 1 warning

Expected behavior Page should render without Webpack/polyfill issues

[CarltonHowell]

Seeing the same with rc59

[TeemuKurki]

Seeing the same problem when using create-react-app 5

[johnkelleher]

Seeing the same with rc59 and a clean CRA install with typescript

"core-js": "^3.20.1",
"mobx": "^6.3.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"redoc": "^2.0.0-rc.59",
"styled-components": "^5.3.3",
"typescript": "^4.5.4"

Workaround Revert the react-scripts version in package.json to

"react-scripts": "4.0.3",

[smeng9]

We can use react-app-rewire to add to config.resolve.fallback dictionary if we want to use cra v5

[clanaid]

i get the same problem in Docusaurus 2.0.0-beta.14

[mtooke]

Same - seeing it on Docusaurus 2.0.0-beta.14. I'm trying to upgrade a batch of Docusaurus instances, but can't do it until the Redoc integration works again.

[AlexVarchuk]

Closed! PR.

[ajrice6713]

@AlexVarchuk im still seeing an issue on the latest docusaurus beta version

using redoc ^2.0.0-rc.70

Im assuming process is the node standard process lib so weird that it would flag as undefined - but it looks like its coming from the closed source openapi-core library 🤷

index.cjs?a546:2 Uncaught (in promise) ReferenceError: process is not defined
    at eval (index.cjs?a546:2:1)
    at Object../node_modules/colorette/index.cjs (vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:2165:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:341:21)
    at eval (utils.js?2417:15:1)
    at Object../node_modules/@redocly/openapi-core/lib/config/utils.js (vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:615:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:341:21)
    at eval (config.js?3e94:9:1)
    at Object../node_modules/@redocly/openapi-core/lib/config/config.js (vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:559:1)

[AlexVarchuk]

Hi @ajrice6713, very weird. Can you provide information to reproduce it? I'll try to investigate.

[ajrice6713]

I have an ApiReference component in my docusaurus site

The site builds fine - but when i go to any of the pages that use this component i see the above error in the console and I just get a blank page

import React from 'react';
import Layout from '@theme/Layout';
import { useColorMode } from '@docusaurus/theme-common';
import { RedocStandalone } from 'redoc';
import { lightTheme, darkTheme } from '../css/redocTheme';

const RedocConfig = (props) => {
  const {colorMode, setColorMode} = useColorMode();
  return <RedocStandalone spec={props.spec} options={{
                      scrollYOffset: '.navbar', // makes the fixed sidebar and scrolling play nicey with docusaurus navbar
                      pathInMiddlePanel: true,
                      expandSingleSchemaField: true,
                      expandResponses: "200,201,202,204",
                      menuToggle: true,
                      theme: colorMode === 'dark' ? darkTheme(props.color) : lightTheme(props.color)
                  }}/>
}

export default function ApiReference(props) {
    return (
        <main>
            <div className="RedocStandalone">
              <RedocConfig spec={props.spec} color={props.color}/>
            </div>
        </main>
    );
}

You could clone this branch of our docsite: https://github.com/Bandwidth/api-docs/tree/DX-2320 and run the following to reproduce

cd site
yarn install 
yarn start

and then navigate to localhost:3000/apis and click on any of the icons in the main page

[AlexVarchuk]

@ajrice6713 thank you a lot for the additional information. I reopen this issue and investigate the problem

[AlexVarchuk]

Hi @ajrice6713, I investigated it.

We'll discuss later fixing it in @redocly/openapi-core. But I found the solution for now. Should a little bit change your redoc-plugin and install process in devDependencies. 🙈

const webpack = require('webpack');

module.exports = function (context, options) {
    return {
        name: 'redoc-compatibility-plugin',
        configureWebpack(config, isServer, utils) {
            config.module.rules.push({
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            })
            return {
                plugins: [
                    new webpack.ProvidePlugin({
                        Buffer: ['buffer', 'Buffer'],
                    }),
                    new webpack.ProvidePlugin({
                        process: 'process/browser',
                    }),
                ],
            };
        },
    };
};

and it works)

Please verify it. I hope this solves your problem.

PS: also, I think your dependency miss buffer lib. It can be reproduced in a clear(first) installation. But not sure maybe it is related to my local env.

[ajrice6713]

@AlexVarchuk thanks for taking a look and proposing a workaround!

Unfortunately I am still seeing the issue with those proposed changes - you can check my commit here https://github.com/Bandwidth/api-docs/commit/7bccbc4a7024a2f2b521901a765a05cec671d661

[AlexVarchuk]

@ajrice6713 Hi. Do you mean this?

Module not found: Error: Can't resolve 'buffer' in '/site/node_modules/yaml/browser/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }
client (webpack 5.72.1) compiled with 1 error

[ajrice6713]

No i am still seeing

Uncaught (in promise) ReferenceError: process is not defined
    at eval (index.cjs?a546:2:1)
    at Object../node_modules/colorette/index.cjs (vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:2165:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:341:21)
    at eval (utils.js?2417:15:1)
    at Object../node_modules/@redocly/openapi-core/lib/config/utils.js (vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:615:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:341:21)
    at eval (config.js?3e94:9:1)
    at Object../node_modules/@redocly/openapi-core/lib/config/config.js (vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:559:1)
eval @ index.cjs?a546:2
./node_modules/colorette/index.cjs @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:2165
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ utils.js?2417:15
./node_modules/@redocly/openapi-core/lib/config/utils.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:615
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ config.js?3e94:9
./node_modules/@redocly/openapi-core/lib/config/config.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:559
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ index.js?933e:13
./node_modules/@redocly/openapi-core/lib/config/index.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:567
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ utils.js?9ca3:18
./node_modules/@redocly/openapi-core/lib/utils.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:1215
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ resolve.js?d294:17
./node_modules/@redocly/openapi-core/lib/resolve.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:719
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ bundle.js?ab07:14
./node_modules/@redocly/openapi-core/lib/bundle.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:527
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ redoc.browser.lib.js?e015:41
eval @ redoc.browser.lib.js?e015:1741
eval @ redoc.browser.lib.js?e015:1741
eval @ redoc.browser.lib.js?e015:2
eval @ redoc.browser.lib.js?e015:2
./node_modules/redoc/bundles/redoc.browser.lib.js @ vendors-node_modules_redoc_bundles_redoc_browser_lib_js.js:1970
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ ApiReference.js:8
./src/components/ApiReference.js @ __comp---site-src-pages-apis-messaging-tsx-102-515.js:15
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ messaging.tsx:8
./src/pages/apis/messaging.tsx @ __comp---site-src-pages-apis-messaging-tsx-102-515.js:31
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
Promise.then (async)
eval @ clientEntry.js?1755:23
./node_modules/@docusaurus/core/lib/client/clientEntry.js @ main.js:143
__webpack_require__ @ runtime~main.js:36
__webpack_exec__ @ main.js:1834
(anonymous) @ main.js:1835
__webpack_require__.O @ runtime~main.js:83
(anonymous) @ main.js:1836
webpackJsonpCallback @ runtime~main.js:1331
(anonymous) @ main.js:9
Show 14 more frames

After committing your suggestions and building locally

[AlexVarchuk]

@ajrice6713 Please, provide steps to reproduce it. My steps:

• pull your commit
• reinstall package
• add buffer lib
• run yarn start

All works ok.

[AlexVarchuk]

yarn build fails with a strange error. I am not familiar with docusaurus, but seems it is not related to redoc.

[ajrice6713]

@AlexVarchuk using yarn start builds and serves a preview site with webpack dev server - thats what I am using to view the pages

Have not gotten to fixing the build command yet - there were some breaking changes from docusaurus alpha to beta that I am working to resolve along with this so there could be other issues along the way - but yarn start will serve the site and expose the bug

[AlexVarchuk]

@ajrice6713 I use yarn start. But don't see the error process is not defined. Please, provide steps to reproduce. Thanks

Try to make a clean install.

rm -fr node_modules/
yarn install
yarn start

Sometimes it helps 😸

[ajrice6713]

Fresh clone of the repo did it - workaround confirmed. Thanks @AlexVarchuk! Ill keep an eye on the other issue and greatly appreciate your support!

[AlexVarchuk]

@ajrice6713 You are welcome. If you have some questions, issues, or ideas for enhancement feel free to open new issues.

[deancn]

yarn run build:demo has the same issue, anyone can help?

[AlexVarchuk]

Hi @deancn. Do you use docusaurus? What version of redoc do you use?

[deancn]

@AlexVarchuk

I used yarn run build:demo failed, the branch is master, commit id 7ca10daf12f2cac9fecf559b11f0f0c8bd21ae43

And I used Apple M1 silicon arch.

[AlexVarchuk]

Hi @deancn Can you try run it on commit 5f2d05f32e1c56252afcf4e646d65d11586c432d? And please, provide the output the command.

PS: We tested it on the same redoc commit id 7ca10daf12f2cac9fecf559b11f0f0c8bd21ae43, and it works for us. Please, provide additional steps to reproduce and additional information(version of nodejs, npm).

[deancn]

@AlexVarchuk The error log as follow

ubuntu@godev:/tmp/redoc$ node -v
v18.4.0
ubuntu@godev:/tmp/redoc$ yarn -v
1.22.19
ubuntu@godev:/tmp/redoc$ git checkout 5f2d05f32e1c56252afcf4e646d65d11586c432d
HEAD is now at 5f2d05f3 chore: v2.0.0-rc.72 (#2038)
ubuntu@godev:/tmp/redoc$ yarn run build:demo
yarn run v1.22.19
$ webpack --mode=production --config demo/webpack.config.ts
(node:1377288) [DEP_WEBPACK_COMPILATION_CACHE] DeprecationWarning: Compilation.cache was removed in favor of Compilation.getCache()
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by status 1.08 MiB [cached] 4 assets
orphan modules 1020 KiB [orphan] 215 modules
runtime modules 1.29 KiB 7 modules
modules by path ./node_modules/ 1.38 MiB
  javascript modules 1.37 MiB 386 modules
  json modules 5.2 KiB
    modules by path ./node_modules/@redocly/ajv/dist/ 3.07 KiB
      ./node_modules/@redocly/ajv/dist/refs/json-schema-draft-07.json 2.72 KiB [built] [code generated]
      ./node_modules/@redocly/ajv/dist/refs/data.json 360 bytes [built] [code generated]
    ./node_modules/swagger2openapi/package.json 1.05 KiB [built] [code generated]
    ./node_modules/@redocly/openapi-core/package.json 1.08 KiB [built] [code generated]
modules by path ./src/ 31.8 KiB
  ./src/polyfills.ts 61 bytes [built] [code generated]
  ./node_modules/workerize-loader/dist/index.js?inline&fallback=false!./src/services/SearchWorker.worker.ts 31.7 KiB [not cacheable] [built] [code generated]
+ 9 modules
  Entrypoint HtmlWebpackPlugin_0-0 =
  runtime modules 440 bytes 3 modules
  cacheable modules 1.84 KiB
    data:text/javascript,__webpack_public.. 77 bytes [built] [code generated]
    ./node_modules/html-webpack-plugin/lib/loader.js!./demo/index.html 1.76 KiB [built] [code generated]

  Child HtmlWebpackCompiler compiled successfully

  assets by status 30.8 KiB [cached] 1 asset
  runtime modules 663 bytes 3 modules
  cacheable modules 101 KiB
    ./node_modules/workerize-loader/dist/rpc-worker-loader.js!./node_modules/esbuild-loader/dist/index.js??ruleSet[1].rules[1]!./src/services/SearchWorker.worker.ts 3.49 KiB [built] [code generated]
    ./node_modules/lunr/lunr.js 97.5 KiB [built] [code generated]

  Child worker compiled successfully

ERROR in ./node_modules/@redocly/openapi-core/node_modules/colorette/index.cjs 1:12-26
Module not found: Error: Can't resolve 'tty' in '/tmp/redoc/node_modules/@redocly/openapi-core/node_modules/colorette'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }'
    - install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "tty": false }
 @ ./node_modules/@redocly/openapi-core/lib/config/utils.js 15:20-40
 @ ./node_modules/@redocly/openapi-core/lib/config/config.js 9:16-34
 @ ./src/utils/loadAndBundleSpec.ts 22:0-65 27:23-29
 @ ./src/utils/index.ts 5:0-36 5:0-36
 @ ./src/index.ts 11:0-24 11:0-24
 @ ./demo/index.tsx 4:0-41 96:45-60

ERROR in cli/index.ts:343:47
TS2345: Argument of type 'CElement<{ store: any; }, Component<{ store: any; }, any, any>>' is not assignable to parameter of type 'ReactNode'.
  Property 'children' is missing in type 'ComponentElement<{ store: any; }, Component<{ store: any; }, any, any>>' but required in type 'ReactPortal'.
    341 |     const store = await createStore(spec, specUrl, redocOptions);
    342 |     const sheet = new ServerStyleSheet();
  > 343 |     html = renderToString(sheet.collectStyles(React.createElement(Redoc, { store })));
        |                                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    344 |     css = sheet.getStyleTags();
    345 |     state = await store.toJS();
    346 |

ERROR in src/common-elements/shelfs.tsx:37:33
TS2769: No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, ResolvedThemeInterface, any, any>', gave the following error.
    Argument of type 'typeof IntShelfIcon' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof IntShelfIcon' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof IntShelfIcon' is not assignable to type 'string'.
  Overload 2 of 2, '(component: "symbol" | "object" | "template" | "title" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 157 more ... | FunctionComponent<...>): ThemedStyledFunction<...>', gave the following error.
    Argument of type 'typeof IntShelfIcon' is not assignable to parameter of type '"symbol" | "object" | "template" | "title" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 157 more ... | FunctionComponent<...>'.
      Type 'typeof IntShelfIcon' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'contextType' are incompatible.
          Type 'React.Context<any> | undefined' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Context<any> | undefined'.
            Type 'React.Context<any>' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Context<any>'.
              The types of 'Provider.propTypes' are incompatible between these types.
                Type 'React.WeakValidationMap<React.ProviderProps<any>> | undefined' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").WeakValidationMap<import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ProviderProps<any>> | undefined'.
                  Type 'React.WeakValidationMap<React.ProviderProps<any>>' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").WeakValidationMap<import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ProviderProps<any>>'.
                    Types of property 'children' are incompatible.
                      Type 'React.Validator<React.ReactNode> | undefined' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Validator<import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode> | undefined'.
                        Type 'React.Validator<React.ReactNode>' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Validator<import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode>'.
                          Type 'React.ReactNode' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
                            Type '{}' is not assignable to type 'ReactNode'.
                              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
    35 | }
    36 |
  > 37 | export const ShelfIcon = styled(IntShelfIcon)`
       |                                 ^^^^^^^^^^^^
    38 |   height: ${props => props.size || '18px'};
    39 |   width: ${props => props.size || '18px'};
    40 |   min-width: ${props => props.size || '18px'};

ERROR in src/components/Callbacks/styled.elements.ts:5:43
TS2769: No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, ResolvedThemeInterface, any, any>', gave the following error.
    Argument of type 'typeof CallbackTitle' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof CallbackTitle' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof CallbackTitle' is not assignable to type 'string'.
  Overload 2 of 2, '(component: "symbol" | "object" | "template" | "title" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 157 more ... | FunctionComponent<...>): ThemedStyledFunction<...>', gave the following error.
    Argument of type 'typeof CallbackTitle' is not assignable to parameter of type '"symbol" | "object" | "template" | "title" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 157 more ... | FunctionComponent<...>'.
      Type 'typeof CallbackTitle' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'contextType' are incompatible.
          Type 'React.Context<any> | undefined' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Context<any> | undefined'.
            Type 'React.Context<any>' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Context<any>'.
    3 | import { darken } from 'polished';
    4 |
  > 5 | export const StyledCallbackTitle = styled(CallbackTitle)`
      |                                           ^^^^^^^^^^^^^
    6 |   padding: 10px;
    7 |   border-radius: 2px;
    8 |   margin-bottom: 4px;

ERROR in src/components/DropdownOrLabel/DropdownOrLabel.tsx:13:13
TS2786: 'Label' cannot be used as a JSX component.
  Its element type 'Component<{}, any, any> | ReactElement<WithOptionalTheme<{ title?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; children?: ReactNode; ... 251 more ...; onTransitionEndCapture?: ((event: TransitionEvent<...>) => void) | undefined; } & Partial<...>, any>, string | ... 1 more ... | ...' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
    11 |   const { Label = MimeLabel, Dropdown = SimpleDropdown } = props;
    12 |   if (props.options.length === 1) {
  > 13 |     return <Label>{props.options[0].value}</Label>;
       |             ^^^^^
    14 |   }
    15 |   return <Dropdown {...props} />;
    16 | }

ERROR in src/components/DropdownOrLabel/DropdownOrLabel.tsx:15:11
TS2786: 'Dropdown' cannot be used as a JSX component.
  Its element type 'ReactElement<WithOptionalTheme<{ options: DropdownOption[]; className?: string | undefined; placeholder?: string | undefined; onChange: (option: DropdownOption) => void; ... 4 more ...; fullWidth?: boolean | undefined; } & Partial<...>, any>, string | ... 1 more ... | (new (props: any) => Component<...>)> | Componen...' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
    13 |     return <Label>{props.options[0].value}</Label>;
    14 |   }
  > 15 |   return <Dropdown {...props} />;
       |           ^^^^^^^^
    16 | }
    17 |

ERROR in src/components/JsonViewer/JsonViewer.tsx:26:13
TS2786: 'CopyButtonWrapper' cannot be used as a JSX component.
  Its instance type 'CopyButtonWrapper' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is not assignable to type 'ReactPortal'.
    24 |
    25 |   render() {
  > 26 |     return <CopyButtonWrapper data={this.props.data}>{this.renderInner}</CopyButtonWrapper>;
       |             ^^^^^^^^^^^^^^^^^
    27 |   }
    28 |
    29 |   renderInner = ({ renderCopyButton }) => {

ERROR in src/components/JsonViewer/JsonViewer.tsx:117:34
TS2769: No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, ResolvedThemeInterface, any, any>', gave the following error.
    Argument of type 'typeof Json' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof Json' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof Json' is not assignable to type 'string'.
  Overload 2 of 2, '(component: "symbol" | "object" | "template" | "title" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 157 more ... | FunctionComponent<...>): ThemedStyledFunction<...>', gave the following error.
    Argument of type 'typeof Json' is not assignable to parameter of type '"symbol" | "object" | "template" | "title" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 157 more ... | FunctionComponent<...>'.
      Type 'typeof Json' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'contextType' are incompatible.
          Type 'React.Context<any> | undefined' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Context<any> | undefined'.
            Type 'React.Context<any>' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").Context<any>'.
    115 | }
    116 |
  > 117 | export const JsonViewer = styled(Json)`
        |                                  ^^^^
    118 |   ${jsonStyles};
    119 | `;
    120 |

ERROR in src/components/Markdown/AdvancedMarkdown.tsx:45:15
TS2786: 'part.component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/tmp/redoc/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is not assignable to type 'ReactPortal'.
    43 |         );
    44 |       }
  > 45 |       return <part.component key={idx} {...{ ...part.props, ...part.propsSelector(store) }} />;
       |               ^^^^^^^^^^^^^^
    46 |     });
    47 |   }
    48 | }

ERROR in src/components/RedocStandalone.tsx:36:6
TS2786: 'ErrorBoundary' cannot be used as a JSX component.
  Its instance type 'ErrorBoundary' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type '{} | null | undefined' is not assignable to type 'ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is not assignable to type 'ReactPortal'.
    34 |
    35 |   return (
  > 36 |     <ErrorBoundary>
       |      ^^^^^^^^^^^^^
    37 |       <StoreBuilder spec={spec} specUrl={specUrl} options={options} onLoaded={onLoaded}>
    38 |         {({ loading, store }) =>
    39 |           !loading ? (

ERROR in src/components/SourceCode/SourceCode.tsx:22:8
TS2786: 'CopyButtonWrapper' cannot be used as a JSX component.
  Its instance type 'CopyButtonWrapper' is not a valid JSX element.
    20 |   render() {
    21 |     return (
  > 22 |       <CopyButtonWrapper data={this.props.source}>
       |        ^^^^^^^^^^^^^^^^^
    23 |         {({ renderCopyButton }) => (
    24 |           <SampleControlsWrap>
    25 |             <SampleControls>{renderCopyButton()}</SampleControls>

1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.73.0 compiled with 11 errors in 31403 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[AlexVarchuk]

Hi @deancn, thank you a lot for the error logs. We reproduced it and start working on that. Here you can see the progress.