"Elements" Web Components Support For ESM #2084
Conversation
✅ Deploy Preview for stoplight-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for stoplight-elements-dev-portal-storybook ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for stoplight-elements-demo ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
aerialist7
changed the title
aerialist7
changed the title
|
Hi @pamgoodrich @lottamus @Nezteb @marbemac! |
There was a problem hiding this comment.
@aerialist7 thanks for the PR. Why did you decide to use the web-components build in your React app versus the React components? The web-components are primarily meant for non-React apps and are less flexible than the React components.
For https://github.com/aerialist7/stoplight-elements-sample/blob/vite-react-web-component/src/App.tsx, instead you could do the following:
import { API } from '@stoplight/elements'
import '@stoplight/elements/styles.min.css'
import './App.css'
function App() {
return (
<div className="App">
<API
apiDescriptionUrl="https://raw.githubusercontent.com/stoplightio/Public-APIs/master/reference/zoom/openapi.yaml"
/>
</div>
)
}
export default App
|
Hi @lottamus, thank you for respond! Sure, I've tried to use React component at the beginning. But the app doesn't work. Run P.S. Of cause using React component is way better for me and I will be very grateful if you can help |
|
Hi @lottamus, can you please answer? |
|
@aerialist7 I've tried your Vitejs example and see it's not working out of the box. I'm not as familiar with Vite and esbuild, so I'll need to investigate to see what config options are needed to support Elements. Ideally it's just supported out of the box 😞 Initial findings:
|
|
@lottamus, thank you! It would be great and we hope that it will be supported out of the box! |
|
Hi @lottamus, can you please answer? |
|
@aerialist7 I've been able to successfully run import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
process: true,
}),
NodeModulesPolyfills(),
],
},
},
});Make sure to install the two additional dev deps Now that |
|
@lottamus I applied your configuration here Thank you,
Yep, It doesn't work for me in |
There was a problem hiding this comment.
I don't have write access here anymore but I believe that this change is fundamentally correct, and the fact that the React distribution does or does not work with Vite should be a separate topic. (Tracked in an issue,)
@lottamus We explicitly support using the web components distribution, then why are you so hesitant to approve a PR that makes the statement import '@stoplight/elements/web-components.min.js' legal under the Node ESM spec? Would you like to restrict web components usage to direct script tag usage for some reason?
Now for the bug itself, I think that should be handled separately, but in the meantime I think I have a workaround for @aerialist7: try adding it the old-school way, using a script tag in the <head>. That does work I believe, even when using React, why wouldn't it.
aerialist7
changed the title
|
@lottamus, thank you! |
Hi Team,
we're using
@stoplight/elementsweb components in Vite/React project.But there is unpleasant error while run
buildordevcommands:That's caused by Vite's strict adherence to the exports field in the package.json.
So here is a fix for this problem.