redoc Using RedocStandalone in Vitejs support

I basically followed the steps here https://redocly.com/docs/redoc/deployment/react/ , expecting it to work but get no luck

Describe the problem to be solved Running Redoc in a vitejs project throws error about process is not defined

Describe the solution you'd like The project should be run without additional errors

Describe alternatives you've considered Main reason switching from CRA to vite is the starting time will be faster

Additional context I have prepared an environment to reproduce the issue. https://codesandbox.io/s/adoring-cori-3zlt01?file=/src/App.jsx:142-157 and https://3zlt01.sse.codesandbox.io/ (see console log in the page)

Seems the undefined process issue is also reported in https://github.com/Redocly/redoc/issues/1820 Its related to @redocly/openapi-core and colorette https://github.com/Redocly/redocly-cli/issues/539

However, after trying to manually define the variable, through process/browser, it throws

TypeError: define_process_default.cwd is not a function at new LintConfig (http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:22384:143) at new Config (http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:22567:21) at n3 (http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:47273:26) at n3.next (<anonymous>) at http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:47291:44 at new Promise (<anonymous>) at me2 (http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:47277:16) at t5 (http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:49733:40) at t5.next (<anonymous>) at http://localhost:3000/node_modules/.vite/deps/redoc.js?v=2865967a:49753:48

Jun 19 '22 05:06 smeng9

Running into the same issue. Were you able to find a workaround?

Jun 22 '22 19:06 lifehackett

Hi @lifehackett,

You can do the following steps:

Add following tag inside your <head></head> in your html <script type="module"> import process from "process"; window.process = process; </script>
Add following configs inside your defineConfig function in vite.config.js

define: {
  "global": {},
},
resolve: {
  alias: {
    process: "process/browser",
    tty: "tty-browserify",
    path: "path-browserify",
  }
},

Don't forget to add tty-browserify and process into your dependency

Working vite example here

https://codesandbox.io/s/pensive-tesla-w3foh9?file=/src/App.jsx:311-353

@AlexVarchuk why do we need process tty and path for browser environment?

Jun 22 '22 22:06 smeng9

Redoc should not be importing process, also this workaround conflicts with process.env which is set through the define field of vite configuration.

Jun 22 '22 22:06 smeng9

@smeng9 thanks so much for your quick response. I was able to use your suggestion with one tweak...the define.global did not work when doing vite build && vite preview, but was required when doing vite dev. Not sure why exactly.

I solved it using conditional config

export default defineConfig(({ command, mode }) => {
  const define = {};
  if (mode === 'development') {
    define.global = {};
  }
  return {
    resolve: {
      alias: {
        process: 'process/browser',
        tty: 'tty-browserify',
        path: 'path-browserify',
      },
    },
    define
  };
});

Jun 22 '22 23:06 lifehackett

why do we need process tty and path for browser environment?

Because Redoc uses some dependencies that rely on those. We're trying to get rid of them but it's not so simple.

Jun 23 '22 06:06 RomanHotsiy

After updating vite from 2.9 to 3.0, the previous workaround no longer works.

It seems have more and more can't-resolves (fs, buffer, events, stream, util, etc.) in the dependencies.

Page should render without these. Waiting on https://github.com/Redocly/redoc/pull/2064 to get merged and tested.

Jul 19 '22 19:07 smeng9

Hi @smeng9. I am not familiar with vite. But try to check the migration guide. fs, buffer, events, stream, util, etc already fixed in browser build. Seems the new Vite 3.0 doesn't get browser build from node_modules. Vitejs has a similar issue https://github.com/vitejs/vite/issues/7576

Jul 19 '22 20:07 AlexVarchuk

Mark as resolved if vite >= 3.2.0

Oct 05 '22 16:10 smeng9

Reopen this because it seems only partially resolved.

The browser field works, no more resolve aliases.

However,

Still requires to inject a global variable for call-me-maybe https://github.com/limulus/call-me-maybe/blob/master/index.js#L3 Linked issue: https://github.com/limulus/call-me-maybe/issues/7
Still has conflict if we define process.env for the frontend https://github.com/Redocly/redocly-cli/blob/bb8b9121c4d7d88352dbc6723ce70db377b8a79e/packages/core/src/config/config.ts#L53

Oct 05 '22 17:10 smeng9

Update: call-me-maybe fixed the global issue.

Now we only have the last issue: conflict if we define process.env for the frontend and then this line uses undefined variable https://github.com/Redocly/redocly-cli/blob/bb8b9121c4d7d88352dbc6723ce70db377b8a79e/packages/core/src/config/config.ts#L53

We need to check both the process and process.cwd is defined before calling that funciton

Still keep this issue open. A temporary mitigation would be use import.meta instead of process.env for environment variables.

Oct 31 '22 20:10 smeng9

redoc redoc copied to clipboard

Using RedocStandalone in Vitejs support

redoc
redoc copied to clipboard