New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create new non-CRA elements example templates #2076
Comments
Hi @Nezteb,
In my opinion, this is due to the lack of Node.js polyfills. Do you have any example using P.S. I can share my project if that helps. |
just FYI the directions to use |
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 // @ts-ignore
import { API } from "@stoplight/elements"; EDIT: I actually made it work only in dev mode. The bundle still gives me:
|
@leoperria I'm running in exactly the same issue :( I got one step closed by adding import 'prismjs' in build: {
commonjsOptions: { transformMixedEsModules: true },
}, Afterwards I got a weird error that said: Unfortunately I had to throw in the towel. At the moment we're using |
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. |
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(),],
}) |
Summary
In #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 to4.0.3
, which isn't ideal in the long run.We're still looking into alternatives to CRA such as:
-e
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
The text was updated successfully, but these errors were encountered: