Create new non-CRA elements example templates

[Nezteb]

Summary

In https://github.com/stoplightio/elements/issues/2058 we discovered that CRA 5+ does not (and will not) work with the existing elements template repos because CRA templates cannot eject and modify their webpack configs to enable Node.js polyfills.

So we had to update our documentation to pin the npx create-react-app command to 4.0.3, which isn't ideal in the long run.

We're still looking into alternatives to CRA such as:

• Create Next App with -e
• npm init using
• Vite/degit
• etc.

There is also https://github.com/stoplightio/dev-portal/tree/plugin but DnC didn't create it and it would need more documentation in place before suggesting it to new users.

I have a PoC to test some of these other options but it's broken and needs more work.

Tasks

• [ ] Figure out which direction we want to go (Next, Vite, npm init using, etc).
• [ ] Implement new demo repos.

[aerialist7]

Hi @Nezteb, I'm looking for using @stoplight/elements as React component in my React+Vite project. But I'm facing different errors while running dev server and production build:

• global is not defined
• process.env is not defined
• Prism is not defined
• Cannot read properties of undefined (reading 'allocUnsafe') at node_modules/fastestsmallesttextencoderdecoder/NodeJS/EncoderAndDecoderNodeJS.min.mjs

In my opinion, this is due to the lack of Node.js polyfills. I tried to add them according to this article, but still doesn't work.

Do you have any example using @stoplight/elements with Vite.js? Could you please help me?

P.S. I can share my project if that helps.

[Yahkob]

just FYI the directions to use npx [email protected] my-dir --template @stoplight/elements no longer work. CRA is a headache these days and the react team is not really supporting it (i.e. look at how many issues they have with no answers 😞) I recently tried to use and something as fundamental as using a webpack proxy no longer works

[leoperria]

Hi @aerialist7, very old thread but I had a very similar situation as you and apparently I fixed adding https://www.npmjs.com/package/vite-plugin-node-polyfills plugin to vite config. Hope this helps.

If you use Typescript you also need to silence the error in import statement. I know, very ugly solution, but I was in rush and apparently there is mismatch between types and exports in package.json :

// @ts-ignore
import { API } from "@stoplight/elements";

EDIT: I actually made it work only in dev mode. The bundle still gives me:

Uncaught ReferenceError: Prism is not defined

[patrickswijgman]

@leoperria I'm running in exactly the same issue :( I got one step closed by adding

import 'prismjs'

in main.tsx but then I got require is undefined. So I added this to my vite.config.ts:

  build: {
    commonjsOptions: { transformMixedEsModules: true },
  },

Afterwards I got a weird error that said: can't convert undefined to object

Unfortunately I had to throw in the towel. At the moment we're using swagger-ui-react which does the job for now

[AlfonsoCebollero]

@leoperria I'm running in exactly the same issue :( I got one step closed by adding

import 'prismjs'

in main.tsx but then I got require is undefined. So I added this to my vite.config.ts:

  build: {
    commonjsOptions: { transformMixedEsModules: true },
  },

Afterwards I got a weird error that said: can't convert undefined to object

Unfortunately I had to throw in the towel. At the moment we're using swagger-ui-react which does the job for now

Hello!

I got to the point of giving in the react library too. The massive workaround I took was to use the HTML way of doing it described in stoplight documentation:

https://docs.stoplight.io/docs/elements/a71d7fcfefcd6-elements-in-html

I added these two lines into my index.html pre-bundle file:

<script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">

And then I just used the HTML tag for the elements element:

export default function ElementsHtml({ code }) {
  return (
    <div className='w-screen p-1'>
      <elements-api
        apiDescriptionDocument={code}
        router="memory"
        layout="responsive"
      />
    </div>
  )
}

The configuration options are the same as in the react component and it is behaving quite well in my application. Hope this helps although it is not the big thing.

[auvansang]

I can make it works with vite and https://www.npmjs.com/package/vite-plugin-node-polyfills

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills(),],
})