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

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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 24
  • Comments: 27

Commits related to this issue

Most upvoted comments

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.

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",

Closed! PR.

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

@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.

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

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