Created
April 17, 2026 10:20
-
-
Save freddi301/3449c004b9c333a4841326e7c3533a75 to your computer and use it in GitHub Desktop.
Liferay 7.4 Fragment to load React component with fast refresh trough vite
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // create a fragment in liferay trough Site menu -> Design -> Fragment -> Blank and put this in js section | |
| // you can also frely edit config pane and it will be forwarded to the component | |
| // start a vite project | |
| // change file variable to your liking, it must export a render function | |
| // that takes the fragment DOM element and the configuration as arguments | |
| // for react it would be | |
| // export function render(fragmentElement, configuration) { | |
| // createRoot(fragmentElement).render(<MyFragmentComponent configuration={configuration} />); | |
| // } | |
| // MyFragmentComponent must be in different file than the render function | |
| const file = "src/components/myComponentEntry.jsx"; | |
| const base = "http://localhost:5173"; | |
| function addScript(src) { | |
| return new Promise((resolve) => { | |
| if (document.querySelector(`script[src='${src}']`)) { | |
| resolve(); | |
| } else { | |
| const script = document.createElement('script'); | |
| script.type = 'module'; | |
| script.src = src; | |
| script.onload = resolve; | |
| document.head.appendChild(script); | |
| } | |
| }); | |
| } | |
| await addScript(`${base}/@vite/client`); | |
| if (!window.__vite_plugin_react_preamble_installed__) { | |
| (await import(`${base}/@react-refresh`)).default.injectIntoGlobalHook(window); | |
| window.__vite_plugin_react_preamble_installed__ = true; | |
| } | |
| (await import(`${base}/${file}`)).render(fragmentElement, configuration); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment