I have start web page which works. It lists AWS CF stacks. When clicking on stack, I would like to open new page and show stack details. I copy pasted 3 pages of start page, renamed them to stack-details and removed extra content. Pages are now bare minimum. Next I open stack-details.html page in browser (and specify query parameters). Empty page is shown. Debugger tools console window shows error:
TestStackDetails.jsx:12 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
at TestStackDetails.jsx:12:28
Line which is displayed in error message
export default StackDetails
Here are three files I use:
stack-details.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Details</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/stack-details.jsx"></script>
</body>
</html>
/src/stack-details.jsx
import ReactDOM from 'react-dom/client'
import StackDetails from './pages/TestStackDetails.jsx'
const root = document.getElementById('root')
ReactDOM.createRoot(root).render(
<React.StrictMode>
<StackDetails />
</React.StrictMode>,
)
pages/TestStackDetails.jsx
import { useState, useEffect } from 'react'
function StackDetails() {
return (
<div className="flex items-center mb-4">
<h2 className="text-xl font-semibold text-gray-800">Overview</h2>
</div>
)
}
export default StackDetails
How to fix issue?
(Many search results bit none helped to solve issue)