Vite Plugin Error

[fathom raptor]

We seem to be running into an error when trying to get our application to even start in dev. Attached is our folder structure and the error we are getting in the dev console.

We were following a similar structure to what Electron Vite has but we are hoping to follow the forge way of doing things.

[dull hound]

What does the link say?

[fathom raptor]

https://github.com/vitejs/vite-plugin-react/issues/11#discussion_r430879201

[dull hound]

So, the problem comes from your components, not your folder structure

[fathom raptor]

How are we supposed to export? if we remove 'default' like the example says in that issue we just get another error that says it is missing the word 'default'.

[dull hound]

can you share this Pin.tsx component?

[fathom raptor]

Message is too long

Let me do something hold on

export function Pin() {
  return (
    <div className="text-white flex items-center flex-col justify-center  min-h-screen">
      <h1>Please Enter Pin That Was Sent</h1>
      <div className="w-full flex-col items-center flex justify-center">
        <input
          readOnly
          placeholder="****"
          className="p-3 rounded-md h-[44px] w-[270px]"
          type="password"
        />

        <div className=" grid grid-cols-4 gap-3 mt-3 items-center ">
          {renderButtons()}
        </div>
      </div>
      {errorMessage && <p className="text-red-500">{errorMessage}</p>}
    </div>
  );
}

there is other stuff going on but this is what it consists of

[dull hound]

Is there more than one component in this file?

[fathom raptor]

nope

just one

[dull hound]

and a single export?

[fathom raptor]

yup

[dull hound]

I don't understand how it's related to the issue linked

[fathom raptor]

I am unsure how to even solve this when I remove the export It says it wants the export when I add the export the damn thing says to remove it lol.

[dull hound]

and what version of @vitejs/plugin-react do you have?

[fathom raptor]

"@vitejs/plugin-react": "^4.2.1",

[dull hound]

https://tenor.com/view/elmo-shrug-idk-i-dont-know-who-knows-gif-17348455

[fathom raptor]

hahahah

great

[dull hound]

what's the first line of your file?

in Pin.tsx

[fathom raptor]

import { useState } from "react";

[dull hound]

okay, I don't know...

[fathom raptor]

f

[dull hound]

on the error stack if you click on the Pin.tsx:1:44 line what does it show?

[fathom raptor]

do you really want to see

[dull hound]

I want to see what's underlined in red xD

[dull hound]

pfff

[fathom raptor]

hahahah

[plain fiber]

unexpected ;

wondering what lang force you to use ;

[fathom raptor]

java

[plain fiber]

i fill your pain =/

[fathom raptor]

FUUUUUUUUUUUUU

CKKKK

i'm down bad lol

Do you have a boiler plate I can follow? that is using react + vite ?

Everything we follow shats the bed

[dull hound]

I prefer the manual way 🤷‍♀️

[fathom raptor]

So how do you usually do it?

you don't have to get into detail but do you create a vite project and wrap electron?

[dull hound]

First create a normal React app, then add Electorn to it. Then manually configure the bundler to handle Electorn files for prod

configuring the bundler is the tricky part

[fathom raptor]

You use CRA I am guessing right?

[dull hound]

I started with CRA yes but since it's no longer maintained I now have a custom webpack config on a tool I made

I wanted to switch to Vite but couldn't find how to add support for ICSS

[fathom raptor]

Man I should just do this in next

just makes things so bloated

[dull hound]

Well, if you're not afraid to configure the bundler and packager yourself, just create a normal React app and add Electron to it

but if you also need to have hot reload on the main process and use import without ESM, I can't help you, never managed to do it x)

[fathom raptor]

Yea, we have to circle back and figure out how we can do this.

[dull hound]

Maybe this will help to start

[cunning quartz]

There are lots of electron-rect-vite starters on github

You could try a simple transplant to see if your issue goes away

A basic one i found: https://github.com/electron-vite/electron-vite-react

[dull hound]

if you only get the error on this one component, you could also try to delete it and rewrite it

[cunning quartz]

^easier option

[fathom raptor]

I cloned this repo and we are getting this:

We might need to do what @dull hound did and create our own wrapper

[dull hound]

Are you trying to use Node.js or Electron APIs in your React code?

[fathom raptor]

The example above is using node

[dull hound]

What do you mean?

[fathom raptor]

Are you talking about the error I originally posted or the one I am showing a few threads up

[dull hound]

the require error

[fathom raptor]

node

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import "./index.css";

// import "./demos/ipc";
// If you want use Node.js, the`nodeIntegration` needs to be enabled in the Main process.
import "./demos/node";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

postMessage({ payload: "removeLoading" }, "*");

[dull hound]

pfff

stupid advice

drive me crazy how many people just say to disable nodeIntegration without even warning about security

By anyway, I was asking because the error you shared may happen when you try to use Node.js in the renderer process

[fathom raptor]

well I just uncommented what the code already had really. They are also using ipc and it works fine

[dull hound]

IPC with a preload file is the secure way

[fathom raptor]

Well I am going to see if I can break this in anyway shape or form

[dull hound]

have you tried to rewrite the component that was throwing the initial error?

[fathom raptor]

yea still nothing

[dull hound]

and if you remove it you no longer have the error?

[fathom raptor]

No

but when I put it back just outputting a h1 it comes back

[dull hound]

there must be something wrong in this file

with the h1 output, what the whole code you have on the file?

[fathom raptor]

This is the entire component:
export function Pin() {
return (
<div className="text-white flex items-center flex-col justify-center min-h-screen">
<h1>Please Enter Pin That Was Sent</h1>
<div className="w-full flex-col items-center flex justify-center">
<h1>hi</h1>
</div>
</div>
);
}

[dull hound]

the complete file?

[fathom raptor]

yup

[dull hound]

no imports?

[dull hound]

hu...

maye you can try with a const

const Pin = () => ...

export default Pin

[plain fiber]

you dont need to import react now?

in jsx?

[dull hound]

nope

no longer necessary since v17 I think

I mean

[fathom raptor]

^^

[dull hound]

I don't think you need extra config for this

[fathom raptor]

nada

[dull hound]

Okay

what if it's about cache or something

rename the file?

[fathom raptor]

even with the rename

[dull hound]

this doesn't make any sense

have you restarted your IDE and the app?

[fathom raptor]

yup lol

BROTHER

WHAT THE

ACTUAL

F

[dull hound]

okay, what about the import?

what?

[plain fiber]

i think

[fathom raptor]

dude

[plain fiber]

its because of 2 src folders

[fathom raptor]

let me show the prb

[dull hound]

There are two ? oO

[plain fiber]

src/renderer/src/pages

[dull hound]

oh yeah

but why would it be a problem 🤔

So tell us Isaac ^^

[fathom raptor]

This is what was in the index.html file:

<!-- <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html> -->

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Link Pro App</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

okay so I freaking remove the commented code out and it works

[dull hound]

you import main in the renderer

[plain fiber]

haha

[dull hound]

wait

I don't get it

[plain fiber]

he had 2 doms

in html

[fathom raptor]

but its commented out

how tf is it picking up 2

[dull hound]

maybe <!doctype html> needs to be first line?

[fathom raptor]

thats about 6 hrs of work time gone

NOICE

let me put all this code back

[dull hound]

Hmm, comments are allowed before the doctype

I still don't understand why you get the error

it's not two DOM since it's commented

[fathom raptor]

that what I am saying

[plain fiber]

depends in how parser handle it

[dull hound]

hmm

[plain fiber]

to replace tsx file

[fathom raptor]

okay it works

wow

Like how the freaking freak dude

Also, The 2 src folders is how the electron-vite has it structured

[dull hound]

the problem is the commented <head> tag

https://stackblitz.com/edit/vitejs-vite-hlynre?file=index.html&terminal=dev

[plain fiber]

react/ts/vite ¯_(ツ)_/¯

[fathom raptor]

@dull hound you are right

wow so the <head> tag causes the prob

[dull hound]

https://tenor.com/view/why-huh-but-why-gif-13199396

[fathom raptor]

because

that's why

well the head is not supposed to wrap the entire doc

[dull hound]

and why specifically the Pin component

you said it was working when you removed it

[dull hound]

but it's commented

and same error with a closing tag

I need a Vite expert to explain this to me xD

[fathom raptor]

<!-- <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html> -->

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Link Pro App</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
    />
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

This is what my index.html looked like when it was breaking, I removed the commented-out HTML and it worked. It could be that the parser is looking for that <!doctype html> on the first line and as soon as it doesn't it whines.

[dull hound]

no

I tested, only when there is a head tag the error is thrown

[fathom raptor]

but that's weird I had no head tag in the first place when I used the playground you sent the head was gone and it worked and when I put it broke but mine never had that.

[dull hound]

the code you shared contains a commented head tag

[fathom raptor]

right but not surrounding the doc

[dull hound]

same

and when it's commented it doesn't wrap anything

the error is still here with :

<!-- <head></head> -->

[fathom raptor]

yeah idk lmao