Missing react preamble

[japhar81]

I've wired up vite-go with gin using the readme as a reference;

glue, err := vitejs.NewVueGlue(getViteConfig())
    if err != nil {
        panic("Failed to initialize frontend services")
    }
    viteJsGlue = glue

    r.GET("/", func(c *gin.Context) {
        ts, err := template.ParseFiles("templates/ui-template.tmpl")
        if err != nil {
            panic("Failed to write UI response")
        }

        ts.Execute(c.Writer, viteJsGlue)
    })

    fsHandler, err := viteJsGlue.FileServer()
    if err != nil {
        panic("could not set up static file server")
    }
    r.GET("/src/", gin.WrapH(fsHandler))

The config it's using is pretty stock, just tweaked for react;

    return &vitejs.ViteConfig{
        Environment: "development",
        AssetsPath:  "frontend",
        EntryPoint:  "src/main.tsx",
        Platform:    "react-ts",
        FS:          os.DirFS("frontend"),
    }

Everything seems to be serving up, but I'm getting a preamble error: ` Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

http://localhost:5173/src/App.tsx:6` Vite docs seem to indicate I need the equivalent of `viteServer.transformIndexHtml(req.url, html)` in my / route, but I'm not seeing anything in the docs on how to do that..

[japhar81]

Should have mentioned, vite is just auto-generated via npm create vite@latest -y frontend -- --template react-ts and is unchanged from what got generated.

[torenware]

Platform should simply be "react", I think, and not "react-ts".

[japhar81]

I tried that too.. same result.. I believe this is the culprit, the fsHandler doesn't seem to return anything for /src/preamble.js

[japhar81]

One more interesting tidbit -- when I just run npm dev on the vite project, it doesn't even try to load a preamble.js. Further, reading the code for the fsHandler, it seems to be looking for react/preamble.js, which doesn't seem to exist anywhere on disk, and the npm dev server returns a 404 as well.

[torenware]

Would you be willing to post your code on Github? Do that and I'll give it a look.

[japhar81]

Sure thing, just added you to https://github.com/japhar81/overwatch

[torenware]

Sure thing, just added you to https://github.com/japhar81/overwatch

OK, I'm subscribed, but I see the repo is still empty. Tell me when you have something up.

[japhar81]

Apologies, forgot to push -- its up there now, you'll find it in cmd/overwatch-server, just run npm run dev in the frontend directory and then fire up main.go and hit http://localhost:9000

[torenware]

I'm new to gin, so:

then fire up main.go

What's the invocation for "go run" to run the overwatch-server's app? Since you were using goland, I did the same, and I'm finding that the current directory for your app when it runs is the root of your project. You've specified "frontend" as the location of your javascript code, but for things to work, there must be a "frontend" directory at your project root. There isn't, and initializing the vite-go library fails.

So I set the current directory to PROJ_ROOT/cmd/overwatch-server, and I can now start.

The problem here appears to be that you are not setting up the ViteGo fileserver correctly. This line of code does not work:

r.GET("/src/", gin.WrapH(fsHandler))

When I try to go to localhost:9000, I see the following in the app's error log:

4:55PM WRN Request id=5e296d71-039b-4a44-aa82-9e0b4ceafd51 ip=127.0.0.1 latency=0.000461 method=GET path=/src/preamble.js status=404 user_agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:104.0) Gecko/20100101 Firefox/104.0"

and I do not see any indication that gin give control over to my file server code to handle this.

I don't know enough to tell you how to fix this with gin, but you are definitely not invoking the file server for /src/preamble.js, and your code is returning a 404 error when the browser tries to retrieve this file. Also, in the debugger, I do not see you entering my library code where handling of the preamble would be implemented.

[japhar81]

You're right, Gin router is a bit dumb.. I had to do this;

    srcGroup := r.Group("/src")
    srcGroup.Any("*foo", gin.WrapH(fsHandler))
    r.Use(static.Serve("/", static.LocalFile("./frontend/public", false)))

Now I just need to figure out why HMR isn't working. Is it expected to in this setup?

[torenware]

I did notice that your template refers to #app and not #root, which is what the default react app expects. But I'm seeing the HMR channel come up on my system using your modified sources.

[torenware]

Also, what does

r.Use(static.Serve("/", static.LocalFile("./frontend/public", false)))

do? What actually serves your template?

[japhar81]

I did notice that your template refers to #app and not #root, which is what the default react app expects. But I'm seeing the HMR channel come up on my system using your modified sources.

I pushed latest if you're curious -- it does bring up the channel, and reports that it updated App.tsx, it just doesn't actually update..

[japhar81]

Also, what does

r.Use(static.Serve("/", static.LocalFile("./frontend/public", false)))

do? What actually serves your template?

That foo serves src/. That static thing just serves the images in frontend/public at /favicon.ico

[japhar81]

Found it -- vite 3.1.0 has a bug, 3.0.9 is 👍