Can't detect preamble - Githubissues

OmniacDev commented 5 days ago

Describe the bug

When using my TitleBar element, it throws this error:

TitleBar.tsx:1  Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at TitleBar.tsx:1:44

Here is the code for the element:

import { useEffect, useState } from "react"

import * as app from "@tauri-apps/api/app"
import * as window from "@tauri-apps/api/window"

export default function TitleBar() {
    const [appVersion, setAppVersion] = useState('-');

    useEffect(() => {
        app.getVersion().then(version => {
            setAppVersion(version);
        })
    }, []);

    const ToggleMaximized = () => { window.appWindow.toggleMaximize() }
    const Minimize = () => { window.appWindow.minimize() }
    const Close = () => { window.appWindow.close() }

    return (
        <>
            <div id="titlebar">
                <div id="title_panel">
                    <p id="title_text_main" className="minecraft-ten">
                        AmethystLauncher
                    </p>
                    <p id="title_text_sub" className="minecraft-seven">
                        {appVersion}
                    </p>
                </div>
                <div id="window_button_panel">
                    <div id="window_button" className="window_button_hover adaptive" tabIndex={-1} onClick={() => {Minimize()}}>
                        <svg width="18" height="18" viewBox="0 0 12 12">
                            <rect id="window_button_svg" width="10" height="1" x="1" y="6"></rect>
                        </svg>
                    </div>
                    <div id="window_button" className="window_button_hover adaptive" tabIndex={-1} onClick={() => {ToggleMaximized()}}>
                        <svg width="18" height="18" viewBox="0 0 12 12">
                            <rect id="window_button_svg_box" width="9" height="9" x="1.5" y="1.5"></rect>
                        </svg>
                    </div>
                    <div id="window_button" className="close_button_hover adaptive" tabIndex={-1} onClick={() => {Close()}}>
                        <svg width="18" height="18" viewBox="0 0 12 12">
                            <polygon id="window_button_svg" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon>
                        </svg>
                    </div>
                </div>
            </div>
            <div id="titlebar_highlight"></div>
        </>
    )
}

I've tried everything, but nothing seems to fix it. It's always this element, and the error randomly jumps around the file (eg. if I put an empty line at 1, then the import at line 2, then the error appears on line 23). The only solution I've found is to just disable the plugin entirely.

Reproduction

https://github.com/OmniacDEV/Amethyst-Launcher_TR

Steps to reproduce

run npm run tauri dev, and then open DevTools with Ctrl + Shift + I, and you can see the error.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
    Memory: 17.49 GB / 31.71 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.68)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    vite: ^5.3.1 => 5.3.1

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[x] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

OmniacDev commented 5 days ago

Oh and I should add that if I comment out the line in App.tsx where I use the titlebar, then the entire rest of the app runs fine with no errors

ArnaudBarre commented 3 days ago

This is because your import shadow the global window. You should avoid this and rename your import to: import { appWindow } from "@tauri-apps/api/window" or import * as tauriWindow from "@tauri-apps/api/window" if you absolutely want to use import all, but this a bad practice because it make it harder for bundler to treeshake your code

vitejs / vite-plugin-react

Can't detect preamble #343