remove data-page in react

[Rian1995]

hi guys,
I got difficult in remove data-page.
With React.JS and render as SSR, no matter what I did, it always show at initially rendering step.
I tried the following code. But still the same. it only remove after render finished. it's really annoying me.
I do need help. thank you.
ssr.jsx might need to be edit as well.
app.jsx

import './bootstrap';
import '../css/app.css';

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
title: (title) => title + " - " + appName,
resolve: (name) => resolvePageComponent("./Pages/${name}.jsx", import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
delete el.dataset.page;//remove div#app data-page
const root = createRoot(el);
root.render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});

package.json
I make a minima require project to represent the case.
Laravel, breeze, bootstrap, sass, sass-loader, vite, [email protected]
{ "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build && vite build --ssr" }, "devDependencies": { "@headlessui/react": "^1.4.2", "@inertiajs/react": "^1.0.0", "@popperjs/core": "^2.11.6", "@vitejs/plugin-react": "^3.0.0", "autoprefixer": "^10.4.12", "axios": "^1.1.2", "bootstrap": "^5.2.3", "laravel-vite-plugin": "^0.7.8", "postcss": "^8.4.18", "react": "^17.0.2", "react-dom": "^17.0.2", "sass": "^1.63.6", "sass-loader": "^13.3.2", "vite": "^4.4.3" } }

I have found #545 (comment)
But I am a frontend develop. I don`t really get it.

In short, I need div#app render without data-page.

PS. I replace 、 as " for reading;

[wb-ts]

Hi there! It seems like you're facing an issue with removing the data-page attribute from the div#app element when rendering your React.js application as server-side rendered (SSR). I can help you with that!

To remove the data-page attribute from the div#app element during initial rendering, you need to make sure that it is not present in the HTML markup generated by your SSR setup. Here are a few steps you can take:

1. Check your SSR implementation: Review the code that generates the initial HTML on the server-side. Make sure that the data-page attribute is not included in the generated markup. Look for any specific template or component where the div#app element is rendered and check if the data-page attribute is added there. If so, remove it.

2. Verify your server configuration: Ensure that your server configuration, such as Express.js or Next.js, is correctly configured to generate the SSR output without the data-page attribute. Double-check any middleware or custom rendering logic that may be responsible for adding the attribute.

3. Check for client-side modifications: Review your client-side JavaScript code and make sure that it does not add the data-page attribute after the initial render. Look for any code that modifies the div#app element and remove any instance where the data-page attribute is added.

By following these steps, you should be able to remove the data-page attribute from the div#app element during initial rendering.

If you need further assistance, please provide more details about your server setup and any relevant code snippets, so I can help you better.

[Rian1995]

I am really glad that someone answer my question.
I have to said, try to edit webpack server configuration is new aspect and I will try.
however, base on the tech. document I read, data-page is the way 'Inertia' deliver the data for Laravel. I might didn`t describe my issue in detail. So far, I can only guess there might be a intrusive way to fix code.