Redoc: Does not work with Next.js - e.trim is not a function

Created on 1 Apr 2020 · 5Comments · Source: Redocly/redoc

Hello, I have created a new Next.js project and implemented Redoc as a React component, but I am getting an error and am unable to display OpenAPI specifications using Redoc.

I am using Redoc in the exact same way with an old Next.js project and it works without problems. I suspect something has changed with later versions of Next.js or Redoc that means they no longer work together.

These are the dependencies:

"core-js": "^3.6.4",
"mobx": "^4.15.4",
"next": "9.3.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"redoc": "^2.0.0-rc.25",
"styled-components": "^5.0.1"

The code:

import { RedocStandalone } from 'redoc'

const Docs = () => (
  <RedocStandalone
    specUrl="http://petstore.swagger.io/v2/swagger.json"
  />
)

export default Docs

The error:

Something went wrong...
e.trim is not a function
Stack trace
TypeError: e.trim is not a function
    at Object.f [as parse] (http://localhost:3000/_next/static/development/pages/_app.js?ts=1585704372155:418:1178)
    at http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22146:13
    at new Promise (<anonymous>)
    at download (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22145:10)
    at Object.readHttp [as read] (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22130:12)
    at getResult (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22375:18)
    at runNextPlugin (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22318:22)
    at http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22307:5
    at new Promise (<anonymous>)
    at Object.push../node_modules/json-schema-ref-parser/lib/util/plugins.js.exports.run (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:22306:10)
    at http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:20743:13
    at new Promise (<anonymous>)
    at readFile (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:20734:10)
    at parse (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:20706:12)
    at $RefParser.push../node_modules/json-schema-ref-parser/lib/index.js.$RefParser.parse (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:20320:15)
    at $RefParser.push../node_modules/json-schema-ref-parser/lib/index.js.$RefParser.resolve (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:20375:15)
    at $RefParser.push../node_modules/json-schema-ref-parser/lib/index.js.$RefParser.bundle (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:20419:15)
    at http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:57230:49
    at step (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67518:23)
    at Object.next (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67499:53)
    at http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67492:71
    at new Promise (<anonymous>)
    at __awaiter (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67488:12)
    at loadAndBundleSpec (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:57224:48)
    at StoreBuilder.<anonymous> (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:60239:46)
    at step (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67518:23)
    at Object.next (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67499:53)
    at http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67492:71
    at new Promise (<anonymous>)
    at __awaiter (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:67488:12)
    at StoreBuilder.load (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:60230:52)
    at StoreBuilder.componentDidMount (http://localhost:3000/_next/static/development/pages/docs.js?ts=1585704372155:60218:14)
    at commitLifeCycles (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:20065:22)
    at commitLayoutEffects (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:23054:7)
    at HTMLUnknownElement.callCallback (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:439:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:488:16)
    at invokeGuardedCallback (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:543:31)
    at commitRootImpl (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:22792:9)
    at unstable_runWithPriority (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:28280:12)
    at runWithPriority$1 (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:11290:10)
    at commitRoot (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:22632:3)
    at finishSyncRender (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:22058:3)
    at performSyncWorkOnRoot (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:22044:7)
    at scheduleUpdateOnFiber (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:21439:7)
    at updateContainer (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:24624:3)
    at http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:25009:7
    at unbatchedUpdates (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:22154:12)
    at legacyRenderSubtreeIntoContainer (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:25008:5)
    at Object.hydrate (http://localhost:3000/_next/static/development/dll/dll_dc8ac110ce5d8530b237.js?ts=1585704372155:25074:10)
    at renderReactElement (http://localhost:3000/_next/static/runtime/main.js?ts=1585704372155:3150:28)

ReDoc Version: 2.0.0-rc.25
Commit: 89054da

I do not understand what is causing this error or how to solve it. Are you able to help?

Source

robertsamarji

All 5 comments

This issue is related to next.js framework. To be more exact it's their dependency: native-url.
Redoc has json-schema-ref-parser dependency which contain http.js file (https://github.com/APIDevTools/json-schema-ref-parser/blob/master/lib/resolvers/http.js).
Look at lines 75 and 98 to see that they parse already parsed url. This behaviour works in node-url out of the box, but next.js overwrite it with their own native-url package in their webpack config. And their package doesn't handle parse of parsed string.

You can fix that by using Next.js 9.1.4 (last version without native-url library) or by editing your next.config.js file something like that:
({ webpack(config) { delete config.resolve.alias.url; <- this is deleting overwrite of node-url by next return config; }